Wednesday, April 30th, 2008

Ajax Accessibility and ARIA

Category: Accessibility, Ajax

John Resig put together a nice overview of the ARIA Live Regions specification with an example of how you can track a list of people in a way that a screen reader can understand when someone is added or deleted. Imagine a todo list application.

  1. <ol aria-live="polite" aria-relevant="additions removals"
  2.    aria-describedby="users-desc" id="users">
  3.   <li>John</li>
  4.   <li>Mary</li>
  5.   <li>Ted</li>
  6.   <li>Jane</li>
  7. </ol>
  • aria-live=”polite” How polite the live area is (as in, how likely is it to butt in to what the user is currently listening to/interacting with). The default is ‘polite’ – in that it waits until all forms of user interaction have been completed before describing the updates to the user.
  • aria-relevant=”additions removals” Only notify the user about new node additions and removals. Since we wish to provide the user with a live list of users we can expect them to be both transitioning online and offline – this will give us the appropriate level of updates to make this possible.
  • aria-describedby=”users-desc” A pointer to the element that describes the contents of the live area. If the user

    wishes to know more about what the contents of the field represent this element can be read to them.

Firefox supports this right now (as of 2.0) and we covered AxsJax the toolkit that helps you implement these features, which Google Reader uses to get the job done.

Posted by Dion Almaer at 10:22 am
1 Comment

3.9 rating from 22 votes

1 Comment »

Comments feed TrackBack URI

I like it

Comment by Tribulus — September 22, 2008

Leave a comment

You must be logged in to post a comment.