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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ajax Y Accesibilidad

  • 254 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
254
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

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