Accessibility of AJAX Applications

What is AJAX?

AJAX is a smorgasbord of web technologies put together to allow dynamic client-server interactions to occur in web applications without requiring pages to reload or refresh. AJAX stands for Asynchronous JavaScript And XML. AJAX itself is not a technology — it is a combination of technologies used in a certain way. AJAX uses the following:

  • XHTML (or HTML) and CSS to create an interface and visually style information. The XHTML and CSS elements can be dynamically modified to display new information or styling. These changes are typically done using the Document Object Model.
  • JavaScript is used to manipulate the interface elements and is also used to establish a communication with a web server through XMLHttpRequest. This allows data (typically in XML or JSON format) to be transmitted between the client and the web server without requiring page reloads or refreshes.

Using AJAX, web applications can allow high levels of interactivity and processing, but do not require the standard type of client-server interaction, specifically:

  1. A web page interface is presented.
  2. User information is collected (via forms, links, etc.).
  3. The user submits information (submits form, activates link, etc.).
  4. The server processes submitted information.
  5. A new web page interface is sent to the user.

With AJAX, all of these steps can be handled in one interface. Examples of AJAX implementation are mapping applications, real-time searches, chats, real-time form validation and processing, live shopping cart applications, e-mail applications, and the list goes on. The types of web applications and interactions allowed by using AJAX has given rise to the term "Web 2.0" — something that surely indicates a major revolution in the way the web can be used. While none of the technologies that comprise AJAX are new or groundbreaking, the increased popularity and awareness of AJAX development brings with it a need for developers to be aware of the accessibility implications these technologies bring.

Why AJAX?

As outlined above, AJAX allows feature-rich, dynamic web applications which use server-side processing without requiring the traditional "submit data — retrieve web page" methodology. Using XMLHttpRequest, data is transmitted behind the scenes of your web application and JavaScript is used to manipulate the application interface and display dynamic information. This allows more streamlined applications that require less processing and data transmission because entire web pages do not need to be generated for each change that occurs. Instead, one web application reflects all of the changes that occur. JavaScript can also be used to allow higher levels of interactivity than allowed through HTML itself (e.g., keyboard shortcuts, click and drag, etc. on Google Maps).

Why not AJAX?

When content is updated dynamically, it has the potential to introduce accessibility issues. While accessibility guidelines allow you to use JavaScript to create and update interface elements, they require that these elements be accessible. Of course a small percentage of site visitors may have JavaScript disabled, so one should consider providing functionality that does not rely on JavaScript - or at a minimum, ensure that the functionality fails gracefully and/or apparently (i.e., the user should not be presented with an interface that appears to function, but does not because JavaScript is not available).

In general, when content within a page can update dynamically, users should be given control over those content updates, such as by activating a link or button. If content updates automatically without user interaction, there is potential for conflict - if an element that currently has focus is removed or significantly changed, keyboard focus can be lost and a screen reader may become confused. This can often result in focus and screen reader reading to revert to the top of the web page.

As an example, if a page displays updated sports scores every 10 seconds, it's quite possible that the automatic content updates will not be accessible to screen reader and keyboard users. And worse, the rest of the page content may also be inaccessible because they cannot reach it without encountering the dynamically updating content.

WCAG 2.0 requires that content that updates dynamically for more than 5 seconds must provide the ability to pause, stop, or hide that dynamic content. If a pause or hide link is provided, ensure that it is available in an accessible way (e.g., it will be difficult to reach a pause button plaed after the dynamic element if that dynamic element causes continual loss of keyboard focus).

In addition to the potential for loss of focus, dynamic content updates may not be apparent to screen reader users. Activating a link or button generally causes a change of context (i.e., the user goes to a new page). With AJAX, the content update may appear in a different location within the same page. In these cases, it is generally necessary to inform the user of this update (perhaps by using an ARIA live region or alert) or by setting focus to the newly updated content area.

While there is nothing inherently inaccessible about AJAX and dynamic updates, special care and testing (including screen reader testing) is often necessary to ensure that it is presented in an accessible manner.