AJAX and Accessibility

There are various implications for accessibility and usability when using JavaScript to dynamically update a Web page. With the following techniques, a Web designer can increase the accessibility for AJAX-based forms.

AJAX has been briefly introduced in Jesse James Garrett’s article “Ajax: A New Approach to Web Applications.”. There are two ways of dealing with forms when working with Web applications:

1. Traditional forms — Update the entire screen when the user clicks the submit button. Data is posted to the server, analyzed and depending on the business logic the user is redirected to a new page or the same page is rendered again.
2. AJAX forms — Use JavaScript to call the server with form data, parse the result in JavaScript and update only the necessary parts using the DOM.

Advantages

A more advanced user interface can be created that doesn’t refresh the page for every change made by the user. Usability of complex forms can be improved as it is possible to make updates as the user moves through the form. An example could be to validate a complex form field data or make server side calculations as the user leaves a field.

Understanding the traditional way of posting form data is sometimes difficult for many inexperienced Web users, especially in situations where pressing the back button after submitting a form makes the browser display a warning message about form data being resubmitted.

Disadvantages

Using AJAX forms require more from the client compared to traditional forms:

• JavaScript has to be enabled. This rules out some browsing devices such as certain mobile terminals and Lynx.
• The browser has to support the

These requirements should not pose a problem for most applications. Most of the Web applications are developed for a particular organization where the client environment typically is very standardized.

But, there are some other problems regarding accessibility. Consider this simple AJAX calculator. Screen reader users have no problem using the form, but when they click the “Add” button they will not know that the result value has been updated. This, apparently, is a major problem.

Even sighted users may have difficulties understanding what area of the page was updated. Miniscule changes are hard to detect on-screen, especially if you are looking at the keyboard while typing.

Improving accessibility of AJAX forms

Following are some recommendations to increase accessibility of AJAX forms:

1. Inform the user at the top of the form that it requires JavaScript or detect JavaScript automatically and warn the user when it isn’t available. This is more helpful if the form has many fields, as it would be annoying for any user to find out that they can’t submit a form after filling it.
2. Inform the user that the page is updated dynamically. This is especially important for screen reader users and will help them decide when to trigger a re-read of the page.
3. Make it possible to receive an alert when information was updated. This may not be practically possible depending on the complexity of a form but will help a screen-reader user a lot. Alert boxes are read by the screen reader and are usually displayed together with a sound. The checkbox should be displayed so it is clear that it is not part of the original form.
4. Highlight recently updated areas for a short period of time. This will help sighted users understand what just happened.

These recommendations have been used in the AJAX calculator example. The second version of the calculator is a decent improvement with relatively little effort than the first version.

Source: Standard Schmandards