AJAX

Understanding Ajax using ARIA

AJAX is an acronym that stands for "Asyncronous Javascript and XML".  For those less technically inclined, AJAX is a technique, not a product or a brand.

One of the classic drawbacks to building a web application interface is that once a page has been downloaded to the client, the connection to the server is severed.  Any attempt at a dynamic interface involves a full roundtrip of the whole page back to the server for a rebuild.  This process tends to make web apps feel inelegant and unresponsive.  Ajax offers a solution using JavaScript and the XMLHttpRequest object. AJAX allows a website to communicate with the server without having to load a new page into the browser. By communicating with the server while the page is still loaded, data can be retrieved and dynamically inserted and removed from the existing page, or altered as required.  A popular Ajax app is used with Google maps.

However, the key challenges to accessiblity include: AJAX apps require browsers enabled with JavaScript and will not perform in web browsers and devices that don't support JavaScript.  The Web Content Accessibility Guidelines also require that web applications function when JavaScript is disabled or not supported.  Additionally, AJAX requires that the XMLHttpRequest be supported.

The current solution to these problems is to either provide a non-AJAX alternative or to allow the AJAX application to continue to function if JavaScript and XMLHttpRequest are not supported.  So, when users allow Ajax to be implemented, the web page will communicate with the web server without requiring reloads for more responsive user interfaces.

Ajax Examples

• Returning a Result [  html]
• Retrieving Information from a Data-base [  html]
• Modal Windows
  • Modal Example (html)
  • Screen-Reader Interaction (html)
  User Problems with Modal lightboxes
  There is no standard behaviour for the keyboard navigation of lightboxes. Sceenreaders will often not read lightbox content unless a script explicitly moves the focus to the new content. The browser's back button doesn't work since the lightbox content is not a new page. Whoever tries it will end up on the previous page. When viewing lightboxes without CSS style sheets, but with JavaScript enabled, images often appear obscured and rendered useless by a dark overlay. During keyboard navigation the focus often accidentally moves to the darkened background where it is no longer visible.
  Recommendations for Modal lightbox implementation
  All focusable lightbox elements should clearly show the current focus. If the escape key closes the lightbox, this behaviour should be documented in the lightbox itself. Ensure a clear and intuitive focus order for keyboard navigation. At last focusable element, have light-box window close by itself. Light box window closes by activating the 'close'-link or hitting escape, and should be presented in the Modal window. When JavaScript is turned off, lightbox contents should be offered on an extra page and still be accessible.

Resources

• Introduction to Ajax (html)
• Best Practices using Ajax (html)
• Accessibility Tools Working Group (html)
   
Ajax and Screen Readers
• Screen Reader Modes (html)
• Content Access Issues (html)
   
   
   
  More ARIA Resources