AJAX accessibility for websites
What is AJAX?
AJAX is not a new technology in itself but a new approach to programming websites based on the following web standards:
- HTML / XHTML
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 impairmentse.g. City and airport suggestions are offered as users enter text
- Drag & drop sliders can help users with reading difficulties due to their illustrative naturee.g. A click-and-drag slider is used to filter search criteria
Accessibility issues caused by AJAX
- 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.
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.
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.