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?

AJAX will not work in all web browsers. As its name suggests, AJAX requires JavaScript. This alone means that AJAX applications will not work in web browsers and devices that do not support JavaScript. For this reason it is not accessible to many typical Web users. The Web Content Accessibility Guidelines also require that web applications function when JavaScript is disabled or not supported. AJAX also requires that XMLHttpRequest be supported, which many browsers do not.

The current solution to these problems is to either provide a non-AJAX alternative to your application or to allow your AJAX application to continue to function if JavaScript and XMLHttpRequest are not supported. Such a requirement may be very difficult to achieve. While developers may choose to require the users to use a browser that supports AJAX, they must understand that such requirements may not be possible for all users - especially those using portable devices or older web browsers.

By its nature, AJAX tends to update and manipulate interface elements 'on the fly'. AJAX also can submit information to the server without user interaction or may do so in methods that are not obvious to the user. For example, most users expect forms to be submitted, validated, and processed when a submit button is selected, but with AJAX this submission and processing can occur at any time (e.g., every 5 seconds, when a form element loses focus, etc.). It may not be apparent to users that information is being processed and saved - and this confusion can be intensified by the fact that AJAX can perform these operations very quickly. Most users expect there to be some delay before feedback or additional information is presented and typically expect the entire page to refresh indicating a new display - with AJAX, none of these visual cues may be apparent.

Another issue with AJAX is how the application interface is updated. When updates to the interface occur, it may not be visually apparent that a change has occurred. The problem is even more troublesome for screen reader users. Screen readers typically read in a linear fashion. When changes happen in the interface, the screen reader user may not be aware of the change and the new content will likely not be read.

In short, to allow dynamic interface changes to be accessible, the application must alert the user that a change has occurred, allow direct access to the new content, and then allow continued functionality of the web application. This process, while difficult to achieve, especially for screen reader users, is possible to achieve in many AJAX applications. Part 2 of this article presents possible solutions to many of these issues, including ways in which ARIA (Accessible Rich Internet Applications) can make dynamic content more accessible.