Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript and AJAX Accessibility Becky Gibson Web Accessibility Architect
Agenda <ul><li>What is AJAX and why do I care? </li></ul><ul><li>What are the Issues with AJAX? </li></ul><ul><li>How do I...
What is AJAX? <ul><li>AJAX = Asynchronous JavaScript and XML </li></ul><ul><li>Allows incremental update of Web pages. </l...
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 Mult...
Why Do I Care About AJAX? <ul><li>Enables building Rich Internet Applications (RIA) </li></ul><ul><li>Allows dynamic inter...
What are the Issues with AJAX? <ul><li>User does not know updates will occur. </li></ul><ul><li>User does not notice an up...
Specific Accessibility Issues <ul><li>Assistive Technology users are not aware of updates </li></ul><ul><ul><li>Updates oc...
Informing the User <ul><li>Explain the interaction to the user </li></ul><ul><ul><li>Before accessing the AJAX enabled pag...
Make updates Noticeable <ul><li>Change the background color of updated data </li></ul><ul><ul><li>Use a subtle color </li>...
Help Users Find Updated Information <ul><li>Provide option for updates via an Alert </li></ul><ul><li>Provide option to se...
DHTML Accessibility Techniques and AJAX <ul><li>DTHML Accessibility allows the creation of desktop style widgets on the we...
DHTML Accessibility Overview <ul><li>Add keyboard event handling </li></ul><ul><li>Add role and state information  </li></...
DHTML Accessibility Overview (continued) <ul><li>Works in HTML or XHTML </li></ul><ul><ul><li>XHTML </li></ul></ul><ul><ul...
Example using XHTML <html lang=&quot;en&quot; xml:lang=&quot;en&quot; xmlns=&quot;http://www.w3.org/TR/xhtml2&quot; xmlns:...
Example Using HTML <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;  &quot;http://www.w3.org/TR/ht...
Summary <ul><li>AJAX is a powerful technology for making dynamic web applications. </li></ul><ul><li>AJAX applications can...
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:...
Upcoming SlideShare
Loading in …5
×

ajax

400 views

Published on

this is ajax presentation.

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

ajax

  1. 1. JavaScript and AJAX Accessibility Becky Gibson Web Accessibility Architect
  2. 2. Agenda <ul><li>What is AJAX and why do I care? </li></ul><ul><li>What are the Issues with AJAX? </li></ul><ul><li>How do I make my AJAX applications Accessible? </li></ul><ul><ul><li>Using HTML Techniques </li></ul></ul><ul><ul><li>Using DHTML Accessibility Techniques </li></ul></ul><ul><li>Demonstration of techniques </li></ul><ul><li>Summary </li></ul>
  3. 3. What is AJAX? <ul><li>AJAX = Asynchronous JavaScript and XML </li></ul><ul><li>Allows incremental update of Web pages. </li></ul><ul><li>Built using standard web technologies - HTTP, (X)HTML, CSS, JavaScript, Document Object Model (DOM), XML </li></ul><ul><li>Used by many popular internet companies. </li></ul><ul><li>Examples: </li></ul><ul><ul><li>Google Suggests, Google & Yahoo! Maps </li></ul></ul><ul><ul><li>Amazon A9 Search </li></ul></ul><ul><ul><li>Flickr, BaseCamp, Kayak </li></ul></ul><ul><ul><li>Yahoo! AJAX Library </li></ul></ul>
  4. 4. Example – Yahoo! Sports
  5. 5. Traditional Web Interaction Client makes http request Web server Server returns a new page
  6. 6. How AJAX works Web server Client makes http request for specific information Server returns the requested information Multiple requests are served
  7. 7. Why Do I Care About AJAX? <ul><li>Enables building Rich Internet Applications (RIA) </li></ul><ul><li>Allows dynamic interaction on the Web </li></ul><ul><li>Improves performance </li></ul><ul><li>Real-time updates </li></ul><ul><li>No plug-ins required </li></ul>
  8. 8. What are the Issues with AJAX? <ul><li>User does not know updates will occur. </li></ul><ul><li>User does not notice an update. </li></ul><ul><li>User can not find the updated information. </li></ul><ul><li>Unexpected changes in focus. </li></ul><ul><li>Loss of Back button functionality*. </li></ul><ul><li>URIs can not be bookmarked*. </li></ul>*These issues will not be discussed as they are not specific to accessibility.
  9. 9. Specific Accessibility Issues <ul><li>Assistive Technology users are not aware of updates </li></ul><ul><ul><li>Updates occur on a different section of the page than the user is currently interacting with. </li></ul></ul><ul><ul><li>Clicking a link updates a different section of the page. </li></ul></ul><ul><ul><li>Auto-complete fields or generated options not available to assistive technology. </li></ul></ul><ul><ul><li>User has no idea how to find new or updated content </li></ul></ul><ul><ul><li>Changes in focus prohibit complete review of the page </li></ul></ul><ul><ul><li>Changes in focus cause disorientation and additional navigation. </li></ul></ul>
  10. 10. Informing the User <ul><li>Explain the interaction to the user </li></ul><ul><ul><li>Before accessing the AJAX enabled page </li></ul></ul><ul><ul><li>Within the AJAX enabled page </li></ul></ul><ul><li>Where possible, provide a manual update option </li></ul><ul><ul><li>Necessary for WCAG 2.0 Guideline 2.2 </li></ul></ul><ul><li>Save the user’s update preference </li></ul>
  11. 11. Make updates Noticeable <ul><li>Change the background color of updated data </li></ul><ul><ul><li>Use a subtle color </li></ul></ul><ul><ul><li>Change only for a few seconds </li></ul></ul><ul><ul><li>Best for small areas of the page </li></ul></ul><ul><li>Briefly blink the updated data </li></ul><ul><ul><li>Blink for 3 seconds or less (WCAG 2.0 Guideline 2.2) </li></ul></ul><ul><ul><li>Avoid the flash threshold (WCAG 2.0 Guideline 2.3) </li></ul></ul>
  12. 12. Help Users Find Updated Information <ul><li>Provide option for updates via an Alert </li></ul><ul><li>Provide option to set focus to new data. </li></ul><ul><li>Use HTML header tags to mark sections with updated content. </li></ul><ul><li>Use DHTML Accessibility Alert role in conjunction with a floating pop-up box. </li></ul><ul><li>Use DHTML Accessibility Description role to describe new content. </li></ul>
  13. 13. DHTML Accessibility Techniques and AJAX <ul><li>DTHML Accessibility allows the creation of desktop style widgets on the web </li></ul><ul><li>Full keyboard navigation without excessive use of the tab key </li></ul><ul><li>Allows easy navigation from component to component and to updated content. </li></ul><ul><li>Allows non-intrusive notification of updated content via Alert </li></ul>
  14. 14. DHTML Accessibility Overview <ul><li>Add keyboard event handling </li></ul><ul><li>Add role and state information </li></ul><ul><li>Make items focusable via tabindex attribute </li></ul><ul><li>Update state information dynamically </li></ul>
  15. 15. DHTML Accessibility Overview (continued) <ul><li>Works in HTML or XHTML </li></ul><ul><ul><li>XHTML </li></ul></ul><ul><ul><ul><li>Uses XHTML 1.x role attribute </li></ul></ul></ul><ul><ul><ul><li>Uses namespaces to add state attributes </li></ul></ul></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><ul><li>Embeds role and state information into class attribute </li></ul></ul></ul><ul><ul><ul><li>Accessibility Script library sets the role and state using DOM apis </li></ul></ul></ul>
  16. 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. 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. 18. Summary <ul><li>AJAX is a powerful technology for making dynamic web applications. </li></ul><ul><li>AJAX applications can present Accessibility barriers. </li></ul><ul><li>Simple changes to application design can make AJAX usable for all. </li></ul><ul><li>DHTML Accessibility Techniques fit well with AJAX </li></ul>
  19. 19. Questions? Further Discussion in Marriott Executive Suite 1 (18 th Floor) 3:30-4:00pm March 24 (today)
  20. 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>

×