Your SlideShare is downloading. ×
0
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Ajax Y Accesibilidad
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajax Y Accesibilidad

267

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
267
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. JavaScript and AJAX Accessibility Becky Gibson Web Accessibility Architect
    • 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. 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. Example – Yahoo! Sports
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>

    ×