Skip to main content

AJAX Accessibility Overview

Becky Gibson, Web accessibility architect, IBM April 2006


Introduction

Asynchronous JavaScript and XML (AJAX) is a hot new technology on the Internet that allows the incremental update of portions of a Web page without reloading the entire page. This has great performance benefits and provides a medium for developing rich Internet applications. Accessibility concerns have arisen with the increased use of JavaScript and AJAX on the Web. This article introduces AJAX and discusses some of the accessibility issues and best practices.

What is AJAX and how is it used?

The ability to incrementally update a Web page using eXtended Markup Language (XML) over hypertext transport protocol (HTTP) has been around for several years but did not gain wide appeal until recently when the AJAX acronym was coined. With a clever name for the technology and its use by Internet companies such as Google, Amazon and others, AJAX became the "must have" technology for the Web. AJAX represents a combination of several Web technologies and is not limited to XML, as its name might suggest.

The key is the asynchronous interaction with the Web server. Rather than the traditional Web model of round trips to the server and reloading the entire page for each action, AJAX allows a "behind the scenes" interaction with the server to update portions of the page. This can provide a much richer and faster experience on the Web. Using a combination of technologies such as HTML/XHTML, Cascading Style Sheets (CSS), JavaScript, Document Object Model (DOM) interactions, XMLHttpRequest object, and XML, a Web author can create a highly interactive Web application.

Consider a traditional e-mail application with a tree control representing a set of e-mail folders on the left-hand side of the page and documents contained in a folder listed on the right-hand side. The user can select a folder, and rather than waiting for the entire page to reload, the list of items in that folder is updated within the page. Another example is providing a preview of mail contents in the lower half of a page without opening the entire e-mail in a new page.

Why is AJAX important?

AJAX is enabling a paradigm shift on the Web from merely receiving information to collaborating and dynamically combining data. It allows the construction of rich Internet applications that can combine data from several sources into one interactive page. It enables technologies such as Google Maps and the various derivatives that interactively combine data such as homes for sale or restaurant listings with map locations. AJAX is one of the technological forces enabling the transition to the next generation Web of collaborative communities with dynamic information gathering and sharing. The Flickr photo sharing and BaseCamp project management applications use AJAX as well as many other popular Web sites.

What are the issues with AJAX?

First and foremost, AJAX relies on JavaScript, so all AJAX applications require that JavaScript is available in the browser. Most graphical browsers support JavaScript so this may only be an issue for some mobile devices or text-only browsers.

Another concern related to this issue is that the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 1.0 require Web sites to function with JavaScript turned off. WCAG 2.0, which is still under development, has removed the restriction on scripting-as long as the site remains accessible-because of the growth in rich Internet applications. IBM has contributed technology to the W3C Protocols and Formats group that allows the creation of fully accessible Web components. Two emerging standards from this roadmap-States and Adaptable Properties Module and the Role Taxonomy for Accessible Adaptable Applications-are designed to address the accessibility of these Rich Internet Applications (RIAs).

The second concern is that because the use of AJAX and dynamic, incremental updates are a paradigm shift of Web usage, people are not always expecting this new behavior. Users may be unaware of updates to a page or may not notice that a part of the page has changed. For example, if a user updates a quantity field for an item in a shopping cart, AJAX can be used to detect the quantity change and automatically update the total price, taxes, and shipping cost fields on the form. The user may not expect these fields to automatically update without having to explicitly request an update. Even if a user is expecting information to update, they might not notice the actual change in data. Or, when people explicitly request an update by selecting a link or button, they may be surprised when the entire page does not reload. In addition, since pages are updated incrementally, AJAX applications may not have distinct uniform resource identifiers (URIs) that can be bookmarked. This can also lead to issues with the Back button not functioning as expected.

The problems can be exacerbated for those who use assistive technologies (AT). Updates can occur on a different area of the page than where the user is currently interacting. This is especially true for people that use screen readers and screen magnifiers. Even if the user is expecting an update, she may not have any idea how to locate the updated content. Applications which set focus to updated data can be especially troubling for some users. Imagine a user who is still reading the first paragraph of a page when an update occurs that moves the focus to a lower portion of the page. The user is likely to become disoriented and now has to find and scroll back to her previous position on the page. If a repeating update occurs that changes focus again, she may never be able to complete the interaction with the page!

AJAX Best Practices

Until the use of AJAX is ubiquitous, it is important to inform the user about the requirements of an AJAX application. This section describes some current best practices for AJAX usage.

Provide an indication that scripting is required
Because RIAs rely on scripting, you should indicate on an entry page in the application that scripting is required. Provide a statement early in the page that indicates the use of AJAX technologies and informs the user that dynamic updates will occur.

Provide an option for manual notification
Some applications provide automatic updates of data without explicit request by the user. Examples include weather, stock, or traffic updates. When building these types of applications consider offering an option to disable the automatic update and allow the user to manually request the updates. Save the user's update preferences on the server for applications that require authentication or by using browser cookies.

Provide notification of updates
If the site relies on asynchronous updates to the page, consider giving the user the option of receiving an alert when an update occurs. This will help notify those users of AT who can't see that an update to the screen has occurred. Providing an alert when change occurs also helps screen-magnifiers users whose focus could be scrolled away from the changed area. And, alerts assist people who may not easily notice the change due to cognitive or attention issues. This should be an optional notification that the user must elect to enable because the alert itself may prove distracting for some users.

Provide notification of focus shift
Do not automatically shift focus on the page when an update occurs. Changing focus without warning can be distracting for some users, especially if there is no easy mechanism to return to the previous position. For example, on a site that dynamically updates a series of stock prices located at the bottom of the page, a sudden shift in focus each time a price change occurs could make the page unusable.

Consider the use of color or a change in font size or weight to temporarily highlight the area which has updated. Just like notification of updates, changes in color must be an elective option. A person using a screen reader or magnifier may want notification by means of an alert or focus change, while a sighted user may prefer a color change. When changing background color, it is best to use a subtle color and only change the background for 5-10 seconds. But, be cautious of causing a dramatic change or blinking that might distract some users.

Some changes in focus, however, may be appropriate. If the user has activated a button to check for new mail, it may be appropriate to move focus to the list of mail messages when the update has completed. Make certain that the user is aware that an action is going to occur and expects focus to change to the results.

Make navigation easy
Provide links to portions of the page that are dynamically updated. If the site relies on the update of several areas of the page at different frequencies, provide a way to quickly navigate to each section. This set of links should be easily reached from the top or bottom of the page to make navigation to them quick and easily repeatable.

Proper use of semantic markup is also important. Assistive technologies provide a mechanism for navigating by headers. Using the HTML header element to mark sections within the page allows assistive technology users to navigate from section to section and find updated content.

Consider a search form that uses AJAX to retrieve the search results rather than reloading the entire page. If the section where the search results are returned is coded with an HTML header element labeled "Search Results," assistive technology users can easily navigate to the updated results section after submitting the search request. This is good HTML coding practice, which is essential in the world of AJAX-enabled Web pages.

Update elements with new content instead of creating new elements
Whenever possible, update existing elements with new content rather than creating and adding new high-level elements to the page. If you must add elements, append them after the current focus point and make them a parent to an existing element rather than the document itself.

For example, create a <div> element in the markup and use it as the parent element when you add new content to the page. Update the contents within that <div> but don't remove and recreate the parent <div> element itself.

Notes:

  • Adding navigable elements with explicit tabindex attribute values within the page may affect the tab order for AT users.
  • Various ATs handle dynamic additions to a page differently, so testing with AT is essential to ensure a fully-accessible page

Dynamic Web Accessibility and AJAX

DHTML accessibility techniques enable RIAs and AJAX accessibility by providing a rich component set that maps to the functionality of components on the desktop. Each component on a page is navigated to using the Tab key. Within a component, users navigate by pressing the arrow keys, thus eliminating excessive tabbing within a Web page. The user can navigate to different components on the page and more easily reach interactive AJAX content. There are also other mechanisms for creating alert notifications and textual descriptions that are spoken by the screen reader. These notifications are one mechanism of notifying the user of updated content without an explicit alert dialog or changes in focus.

Using this technology, Web application developers can create fully keyboard-accessible components that improve usability as well as accessibility. The additional role and state information can be translated by the browsers into a format usable by AT to provide more information about the function and state of a component. Both Yahoo! and AOL are implementing this new technology and they are actively helping to evangelize it throughout the AT community.

An example of how Dynamic Web Accessibility techniques can be used to enable AJAX accessibility is a documentation site with a tree control on the left side of the page that contains the contents and a content area on the right side of the page. The user can navigate through the tree control using the arrow keys and get detailed information from a screen reader about the level and state-expanded or collapsed-for each tree node. When a node is selected, the content area on the right-hand side of the page is updated without reloading the page and losing focus within the tree control. The user can tab from the tree control into the content area and interact with the data. To navigate to new content, the user presses Shift + Tab to move focus into the tree control at the last selected node. Now the user can continue to navigate from the previous position in the contents tree-all without a page reload or re-navigation through already visited tree nodes.

Dynamic Web Accessibility sprung from collaboration between IBM, the W3C and the Mozilla development community. As the W3C develops this new standard, IBM has implemented the necessary pieces in Firefox 1.5 and is offering expertise to help AT vendors fully support it. The Window-Eyes 5.5 screen reader supports this technology. The Dynamic Accessible Web Content Roadmap explains how to incorporate role and state information into DHTML applications.

Summary

AJAX is an exciting new technology that is extending the Web and allowing the creation of rich Internet applications. Incremental updates to a page can improve performance and provide for more complex user interfaces and interactions via the Web. There are some basic steps that can be taken today to ensure that AJAX-enabled applications can be accessible-particularly implementing he DHTML Accessibility Roadmap technologies.

About the Author

Becky Gibson is a Web accessibility architect in IBM's Emerging Technologies Group. She focuses on accessibility and the Web and is also a member of the W3C Web Content Accessibility Guidelines (WCAG) working group. Becky came to IBM through Lotus and Iris where she worked on Lotus 1-2-3, Lotus Notes and Workplace.