///AJAX Accessibility for Websites

AJAX Accessibility for Websites

Introduction

AJAX or Asynchronous JavaScript and XML, is an innovative way of using existing technologies to create highly interactive web applications. AJAX
allows portions of the page to be updated without having to refresh and
reload the entire page. It can increase site performance significantly
and provide cutting edge user interfaces. Unfortunately it can also be
a source of concern for delivering fully accessible web sites.

What is AJAX?

AJAX is not a new technology in itself but a new approach to programming websites based on the following web standards:

  • JavaScript
  • XML
  • HTML / XHTML
  • CSS

The key word is asynchronous – AJAX
applications work ‘behind the scenes’ with the web server to
dynamically update the content of a web page. JavaScript plays an
important role in this process, trading data with the server and
manipulating the information on the page.

Accessibility benefits of AJAX

As well as significantly improving the user experience AJAX applications can also enhance accessibility. For example:

  • Auto-suggest dropdowns can help both users with reading difficulties and motor impairments

    e.g. City and airport suggestions are offered as users enter text

    Screenshot of Kayak auto-suggest dropdown

  • Drag & drop sliders can help users with reading difficulties due to their illustrative nature

    e.g. A click-and-drag slider is used to filter search criteria

    Screenshot of Amazon drag & drop  sliders

Accessibility issues caused by AJAX

AJAX and JavaScript are usually used to update page content. When this happens screen readers respond in a variety of different ways, depending on both the screen reader and the browser:

  • Screen
    readers aren’t aware of the changes so will read out the unmodified
    version of the page. This means screen reader users don’t get the
    updated content of the page.
  • Screen readers are aware of
    the changes but will only read the modified content when they naturally
    reach it. This is fine unless the modified content precedes users’
    current location. If this happens, they’re unlikely to hear this
    content.
  • Screen readers start reading the modified page
    but from the very top. This means that users have to essentially listen
    to all of the page content again. It can be difficult for these users
    to know which content has been updated and where in the page this
    content is.
  • Screen readers are automatically taken to
    the modified content so users instantly know that page content has been
    updated – this can however severely disorientate users.

Screen magnifier
users might not notice changes that have occurred outside the areas
they’re interacting with. They can therefore miss out on important
information especially if the changed content takes place above their
current location on the page.

Finally, AJAX requires JavaScript to be enabled. Although assistive technologies can now handle many uses of JavaScript they don’t all provide complete support.

Recommendations for AJAX and accessibility

There’s one key question to consider when planning the development of a website and the use of AJAX: Is there a real need to use AJAX?. If the answer is yes, then ensure the following is true to ensure AJAX accessibility is optimised:

  • Inform users early in the page that dynamic updates will occur
    Not all users are familiar with AJAX
    interfaces. Let them know that changes may take place so they can
    expect and look for these changes. This is particularly important for
    screen reader and magnifier users as they may be unaware that changes
    have taken place.

  • Highlight the areas that have been updated
    Using
    subtle changes to highlight areas that have changed, for just a short
    period of time, can be most helpful. It will inform users, in
    particular those with reading difficulties that updates have taken
    place.

  • Don’t change the focus
    Do not move
    the focus of the page to where the change has taken place. Changing the
    focus can be disrupting for screen reader and magnifier users
    especially if there are no mechanisms to return to the previous
    position.

  • Offer the option to disable automatic updates
    Allow
    users to manually request page updates, for example by providing links
    and/or form buttons to refresh the page on-demand. Screen reader and
    magnifier users may be unaware of on-the-page changes. It can also be
    difficult for users with reading difficulties to keep up with automatic
    updates. If possible, store users’ preferences for requesting page
    updates for future visits to the site.

  • Ensure the site works if JavaScript isn’t enabled
    Build a standard application then overlay it with AJAX to improve its functionality. If JavaScript is disabled or not available then users will still be able to use the site.

In case of an advanced AJAX application, consider providing an HTML alternative. If the AJAX
application is impossible to use by group of users (e.g. if it relies
on the use of a mouse, such as the drag & drop sliders) then a link
to an HTML alternative is a must.

2010-05-25T22:19:27+00:00 March 10th, 2008|AJAX|0 Comments

About the Author:

This article was written by Brigitte Simard. Brigitte's crazy about accessibility - so crazy that she works for Webcredible helping to make the Internet a better place for everyone. She spends much of her time working on the world's most accessible CMS and is very good at accessible CSS web design.

Leave A Comment