A common concern of most Ajax applications has been around their resulting accessibility. While, arguably, it’s possible to design some form of a usable web page without the use of JavaScript it should be possible – with the additional scripting information – to provide a better experience to users. It’s at this point that the ARIA specification comes into play. A large set of interaction is defined within it which is able to help web applications communicate directly to a screen reader in an effective manner.
To get a feel for what this interaction looks like, take the example of ARIA Live Regions (more info). With this functionality it would be possible to keep a live-updated list of users and allow the screen reader to keep up-to-date.
Observe the following ARIA-marked-up HTML:
<b>Active Users:</b>
<p id="users-desc">A list of the currently-connected users.</p>
<ol aria-live="polite" aria-relevant="additions removals"
aria-describedby="users-desc" id="users">
<li>John</li>
<li>Mary</li>
<li>Ted</li>
<li>Jane</li>
</ol>
A couple settings are used to make this piece of HTML particularly interactive to the screen reader (the actual JavaScript that will update this list is left out – but needless to say nothing, in particular, is needed beyond simple DOM insertion and removal).
- 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.
What’s most important about all of this, though, is that ARIA isn’t just a pipe dream of functionality: It’s implemented, today, in Firefox 2 and even more-so in the upcoming Firefox 3.
The Google Reader team recently took advantage of this and added full ARIA support to their application. It’s safe to say that Google Reader is not a trivial application by any stretch, allowing this to demonstrate the feasibility of ARIA within large-scale web application projects.
In the course of their implementation they built a tool, AxsJAX, which injects ARIA usability enhancements into many pages using a bookmarklet, greasemonkey, or Fire Vox (a Firefox screenreader). They started by seeding a number of Google applications with this drop-in accessibility support (along with a few others, including the XKCD web comic).
I continue to be impressed with what can be accomplished with ARIA – and seeing the work that Google has been putting forth by implementing this functionality in their applications has been incredibly enlightening and encouraging.
Rumble (April 29, 2008 at 2:06 am)
Quick question… for this to work does the <ol> tag with the aria-* attributes have to be hardcoded in the HTML page or is it OK to add this node and it’s attributes to the DOM using javascript?
ani625 (April 29, 2008 at 2:44 am)
Dude, Two of your posts hit del.icio.us mainpage together!
Cheers
Gijs (April 29, 2008 at 3:08 am)
Rumble: it’s OK to add the node with aria attributes at runtime, as far as I’m aware.
ChatZilla already uses WAI-ARIA Live Regions to make the chat content accessible, in fact. And I was supposed to do a write-up about how it works, but I think someone else just did… ;-)
Marco (April 29, 2008 at 4:50 am)
Hi John! Fantastic post!
One typo slipped in:
This should be “aria-describedby”. Note the i instead of the e. :-) In the actual example, it’s correct.
Marco
Ara Pehlivanian (April 29, 2008 at 6:06 am)
Awesome post. It’s good to read about ARIA implementations. You’ve just inspired me to seriously consider it for some major upcoming projects.
leveille (April 29, 2008 at 7:51 am)
Great stuff John. Whenever accessibility comes up in conversation (at least for me) it seems that things always get boiled down to section 508 and WCAG. With our desire to introduce richer experiences for our clients, it’s great to know that work such as ARIA is underway. I feel like I should have heard about this a while ago. Maybe I just haven’t been paying attention.
@Gijs: I’m taking a closer look at my ChatZilla now. Very cool.
John Resig (April 29, 2008 at 8:11 am)
@Marco: Good catch, fixed.
Thanks everyone – ARIA is some really cool stuff. It makes screen reading so much more palatable – hell, even enjoyable – which is pretty much unheard of.
Aaron Barker (April 29, 2008 at 8:32 am)
So what is screen reader support like for ARIA stuff? I did a quick Google and didn’t find any readily available information.
Bob Easton (April 29, 2008 at 9:25 am)
Screen reader support is coming up pretty quickly. GW Micro’s Window Eyes screen reader was the first to embrace ARIA and has had some level of ARIA support since version 5.5. Freedom Scientific is not far behind with partial support starting in version 7 (JAWS is at 9 now.)
It’s a moving target. The spec is still evolving, as is browser support and assistive technology support. Even at these early stages, impressive improvements can be had.
For a bit more detail, see the “Implementations” section of the ARIA Roadmap document at: http://www.w3.org/TR/2006/WD-aria-roadmap-20060926/#implementations
Jim Priest (April 29, 2008 at 9:27 pm)
This is great stuff! I’m loving jQuery but at the same time have to support Government applications which are 508 heavy…
Steve Lee (May 1, 2008 at 12:17 am)
@Aaron Baker: You’re spoilt for choice with Open Source Screen Readers that support ARIA. Orca, NVDA and FireVox all have it. See this FAQ for a list of who’s supporting ARIA as of CSUN this year. In fact the entire FAQ is a good read and there’s other useful docs on developer.mozilla.org. Google Reader is also worth checking out as an example web app and something called Dojo ;-)