AJAX and Accessibility

Recently, there has been a lot of interest in using AJAX (the technology, not the detergent) when building web applications. I have a feeling that javascript and the XMLHttpRequest object will be the Next Big Thing ™. Let’s have a look at how usability and accessibility of AJAX forms can be improved.

In this article we will have a look at the implications for accessibility and usability when using Javascript to dynamically update a web page. I will also show how you can increase accessibility for AJAX-based forms.

This article is also available in Japanese and in german.

For those who haven’t heard of AJAX before, I recommend you head over to Jesse James Garrett’s article “Ajax: A New Approach to Web Applications” for a good introduction. If you want more information on how to create your own AJAX forms, see the references section at the end of this article. If you can’t be bothered to read that, here is the outline: There are two ways of dealing with forms when working with web applications:

  1. 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. Let’s call this traditional forms.
  2. Use javascript to call the server with form data, parse the result in javascript and update only the necessary parts using the DOM. We’ll call this AJAX forms.

What are the advantages?

There are many advantages in using the AJAX forms. It is possible to create a more advanced user interface that doesn’t refresh the page for every change made by the user. For complex forms usability can be improved as it is possible to make updates as the user moves through the form. An example could be to validate complex form field data or make server side calculations as the user leaves a field.

Many inexperienced web users have difficulties understanding the traditional way of posting form data. Especially in situations where pressing the back button after submitting a form makes the browser display a warning message about form data being resubmitted.

What’s the problem with AJAX?

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 XMLHttpRequest object (or similar). Currently this is available in Mozilla, Firefox, Internet Explorer and Safari. Rumour has it that Opera will introduce it soon.

These requirements should not pose a problem for most applications. A lot of web applications are developed for a particular organisation where the client environment typically is very standardised.

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, obviously, 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 (I still do).

Does this mean you shouldn’t use AJAX for your web UI?

Improving accessibility of AJAX forms

Fortunately there are some things we can do to increase accessbility of AJAX forms. Here are my recommendations:

  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. If the form has many fields you will spare your users a lot of frustration. Everyone hates filling out a form just to find out that they can’t submit 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 recieve an alert when information was updated. This may not be practically possible depending on the complexity of your 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. The nice folks over at 37signals have dubbed this “The Yellow Fade Technique” but you can use any colour you like. Check out Adam Michela’s code for another way of providing the fade.

Let’s have a look at the accessible AJAX calculator to see these recommendations in action. Compare it with the first version of the calculator. A decent improvement with relatively little effort.

I hope this article will inspire you to make sure your AJAX forms are accessible.

References:

Comments are closed.