Accessibility and an introduction to ARIA

First of all, what the hell is ARIA and why should I care? Well first of all, that’s a rather rude way to start a conversation, but whatever dude; the Accessible Rich Internet Applications (ARIA) is a proposed specification (currently in the working draft stage) developed by the W3C. What it does is set out a proposed structure for front-end developers to programmatically make their applications and pages more accessible.

So in short, it makes people who have trouble viewing normal pages lives a little easier.

As ARIA is still in the draft stage the final spec might change, but getting a good grasp of what it is now and how it can be used to improve the accessibility of your apps can be of real benefit.

First of all, if you want to take a look at the full draft spec as it stands it’s accessible via the W3C site. As with all full spec sheets produced by the W3C, it’s a little tough to wade through, but if you can stand to trudge through it I’d encourage you to do it.

At it’s core ARIA allows us to define the role of an element (say a navigation bar), what properties that element has (if a form field is required for instance), and last of all the current state of an element. All of this is done by using a new set of proposed HTML attributes and values. One of the most important is the role landmark attribute, what it does it is provide a way for assistive technology (like JAWS) to allow users to navigate a page using simple keyboard short-cuts. It’s simple as hell to implement too, check out an example below:

As you can see in above the example, the role attribute’s used to denote the role of this element in the interface.

Another of the new set of ARIA attributes is used to define the state of an element, there are a few we can use, like the following: aria-required=”true”, which is fairly straightforward in that it denotes the fact a fields is required. This is quite a large area in itself so I won’t go into it here, but please read the spec if you’re interested.

So that’s all good right? A simple and effective way of making your designs more accessible? Great! I love it! But wait, there’s a small problem: compliance with the standard.

The current versions of JAWS, Window-Eyes, NVDA and ZoomText have some preliminary support for ARIA. But as with all of these things it’s not complete support in any, and with the unfinished state of the spec that’s not gonna change any time soon, unfortunately.

I’m not gonna go into much more detail, this being an introduction and just the first in a series of posts regarding ARIA and accessibility more generally, and I’ll expand on it much more in the future. But if you have any questions at this point, I’m happy to help in the comments.