SlideShare a Scribd company logo
1 of 20
JavaScript and AJAX Accessibility Becky Gibson Web Accessibility Architect
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What is AJAX? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Example – Yahoo! Sports
Traditional Web Interaction Client makes http request Web server Server returns a new page
How AJAX works Web server Client makes http request for specific information Server returns the requested information Multiple requests are served
Why Do I Care About AJAX? ,[object Object],[object Object],[object Object],[object Object],[object Object]
What are the Issues with AJAX? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],*These issues will not be discussed as they are not specific to accessibility.
Specific Accessibility Issues ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Informing the User ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Make updates Noticeable ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Help Users Find Updated Information ,[object Object],[object Object],[object Object],[object Object],[object Object]
DHTML Accessibility Techniques and AJAX ,[object Object],[object Object],[object Object],[object Object]
DHTML Accessibility Overview ,[object Object],[object Object],[object Object],[object Object]
DHTML Accessibility Overview (continued) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Example using XHTML <html lang=&quot;en&quot; xml:lang=&quot;en&quot; xmlns=&quot;http://www.w3.org/TR/xhtml2&quot; xmlns:wairole=&quot;http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#&quot; xmlns:waistate=&quot;http://www.w3.org/2005/07/aaa&quot; > ……… .. <span id=&quot;slider&quot; class=&quot;myslider myselector2&quot; role=&quot;wairole:slider&quot; waistate:valuemin=&quot;0&quot; waistate:valuemax=&quot;50&quot; waistate:valuenow=&quot;33&quot; > </span>
Example Using HTML <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;  &quot;http://www.w3.org/TR/html4/loose.dtd&quot; > <html lang=&quot;en&quot;> <head> <script type=&quot;text/javascript&quot; src=&quot;enable.js&quot;></script> </head> ……………….. <span id=&quot;slider&quot; tabindex=&quot;0&quot;  class=&quot;myslider myselector2  axs   slider   valuemin-0   valuemax-50   valuenow-33 &quot; > </span>  Technique described at: http://www.w3.org/WAI/PF/adaptable/HTML4/embedding-20060318.html
Summary ,[object Object],[object Object],[object Object],[object Object]
Questions? Further Discussion in Marriott Executive Suite 1 (18 th  Floor) 3:30-4:00pm March 24 (today)
Sample Code for Changing Styles <style type=&quot;text/css&quot;> .notice { background-color:#FFFFCC; } .roInput { border:none; background-color:#FFFFFF; } </style> <script type=&quot;text/javascript&quot;> // get the element to hold updated data var priceLoc = document.getElementById('priceLoc&quot;); // update the data in price loc priceLoc.value = &quot;new data&quot;; // set the style so change will be noticed priceLoc.className = &quot;notice&quot;; // create timer to call clearActive() with element id and style name setTimeout(&quot;clearActive('priceLoc','roInput');&quot;, 5000);  function clearActive(activeId, resetStyle) { var curActive = document.getElementById(activeId); curActive.className = resetStyle; } </script>

More Related Content

What's hot

Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajaxRaja V
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentationjrdoane
 
Introduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniIntroduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniJoseph Khan
 
Architecture in Ajax Applications
Architecture in Ajax ApplicationsArchitecture in Ajax Applications
Architecture in Ajax ApplicationsAlois Reitbauer
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentationthinkphp
 
Ajax ppt - 32 slides
Ajax ppt - 32 slidesAjax ppt - 32 slides
Ajax ppt - 32 slidesSmithss25
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introductionshaojung
 
Ajax:From Desktop Applications towards Ajax Web Applications
Ajax:From Desktop Applications towards Ajax Web ApplicationsAjax:From Desktop Applications towards Ajax Web Applications
Ajax:From Desktop Applications towards Ajax Web ApplicationsSiva Kumar
 
Project Feedloop
Project FeedloopProject Feedloop
Project Feedloopchrisiegers
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1nleesite
 
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax ApplicationsTSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applicationsguestc75cdc
 
Performance anti patterns in ajax applications
Performance anti patterns in ajax applicationsPerformance anti patterns in ajax applications
Performance anti patterns in ajax applicationsSergeyChernyshev
 

What's hot (20)

Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
 
Introduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniIntroduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - Zaloni
 
Ajax
AjaxAjax
Ajax
 
Architecture in Ajax Applications
Architecture in Ajax ApplicationsArchitecture in Ajax Applications
Architecture in Ajax Applications
 
Ajax
AjaxAjax
Ajax
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
AJAX
AJAXAJAX
AJAX
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentation
 
Overview of AJAX
Overview of AJAXOverview of AJAX
Overview of AJAX
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
 
Ajax
AjaxAjax
Ajax
 
Ajax ppt - 32 slides
Ajax ppt - 32 slidesAjax ppt - 32 slides
Ajax ppt - 32 slides
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
Ajax:From Desktop Applications towards Ajax Web Applications
Ajax:From Desktop Applications towards Ajax Web ApplicationsAjax:From Desktop Applications towards Ajax Web Applications
Ajax:From Desktop Applications towards Ajax Web Applications
 
Project Feedloop
Project FeedloopProject Feedloop
Project Feedloop
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1
 
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax ApplicationsTSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
 
Performance anti patterns in ajax applications
Performance anti patterns in ajax applicationsPerformance anti patterns in ajax applications
Performance anti patterns in ajax applications
 

Similar to Ajax Y Accesibilidad

CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2Geoffrey Fox
 
Decoding the Web
Decoding the WebDecoding the Web
Decoding the Webnewcircle
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Estelle Weyl
 
Usability AJAX and other ASP.NET Features
Usability AJAX and other ASP.NET FeaturesUsability AJAX and other ASP.NET Features
Usability AJAX and other ASP.NET FeaturesPeter Gfader
 
IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003Wes Yanaga
 
HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)Performics.Convonix
 
Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applicationsdominion
 
Internet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyInternet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyChristian Thilmany
 
Ajax Introduction
Ajax IntroductionAjax Introduction
Ajax IntroductionOliver Cai
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Lachlan Hardy
 
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Peak Usability
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSTimo Herttua
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementationdavejohnson
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentationengcs2008
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web ArchitectureChamnap Chhorn
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5Suresh Kumar
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 

Similar to Ajax Y Accesibilidad (20)

CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2
 
Decoding the Web
Decoding the WebDecoding the Web
Decoding the Web
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 
Usability AJAX and other ASP.NET Features
Usability AJAX and other ASP.NET FeaturesUsability AJAX and other ASP.NET Features
Usability AJAX and other ASP.NET Features
 
IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003IE8 Dev Overview_pp2003
IE8 Dev Overview_pp2003
 
HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)
 
Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applications
 
Internet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian ThilmanyInternet Explorer 8 for Developers by Christian Thilmany
Internet Explorer 8 for Developers by Christian Thilmany
 
Ajax Introduction
Ajax IntroductionAjax Introduction
Ajax Introduction
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
 
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
M Ramya
M RamyaM Ramya
M Ramya
 
HTML5
HTML5HTML5
HTML5
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 

Ajax Y Accesibilidad

  • 1. JavaScript and AJAX Accessibility Becky Gibson Web Accessibility Architect
  • 2.
  • 3.
  • 5. Traditional Web Interaction Client makes http request Web server Server returns a new page
  • 6. How AJAX works Web server Client makes http request for specific information Server returns the requested information Multiple requests are served
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16. Example using XHTML <html lang=&quot;en&quot; xml:lang=&quot;en&quot; xmlns=&quot;http://www.w3.org/TR/xhtml2&quot; xmlns:wairole=&quot;http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#&quot; xmlns:waistate=&quot;http://www.w3.org/2005/07/aaa&quot; > ……… .. <span id=&quot;slider&quot; class=&quot;myslider myselector2&quot; role=&quot;wairole:slider&quot; waistate:valuemin=&quot;0&quot; waistate:valuemax=&quot;50&quot; waistate:valuenow=&quot;33&quot; > </span>
  • 17. Example Using HTML <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot; > <html lang=&quot;en&quot;> <head> <script type=&quot;text/javascript&quot; src=&quot;enable.js&quot;></script> </head> ……………….. <span id=&quot;slider&quot; tabindex=&quot;0&quot; class=&quot;myslider myselector2 axs slider valuemin-0 valuemax-50 valuenow-33 &quot; > </span> Technique described at: http://www.w3.org/WAI/PF/adaptable/HTML4/embedding-20060318.html
  • 18.
  • 19. Questions? Further Discussion in Marriott Executive Suite 1 (18 th Floor) 3:30-4:00pm March 24 (today)
  • 20. Sample Code for Changing Styles <style type=&quot;text/css&quot;> .notice { background-color:#FFFFCC; } .roInput { border:none; background-color:#FFFFFF; } </style> <script type=&quot;text/javascript&quot;> // get the element to hold updated data var priceLoc = document.getElementById('priceLoc&quot;); // update the data in price loc priceLoc.value = &quot;new data&quot;; // set the style so change will be noticed priceLoc.className = &quot;notice&quot;; // create timer to call clearActive() with element id and style name setTimeout(&quot;clearActive('priceLoc','roInput');&quot;, 5000); function clearActive(activeId, resetStyle) { var curActive = document.getElementById(activeId); curActive.className = resetStyle; } </script>