This week I added WAI-ARIA landmark roles to the Accessible Administrator Template. ARIA has been created as the answer to the inaccessibility introduced with Web 2.0 and its feature-rich behavior layer.

What is ARIA?

WAI-ARIA stands for Web Accessibility Initiative-Accessible Rich Internet Applications. It provides accessibility to the new generation of dynamic user interfaces and defines roles different sections of a web page.

The user interface portion provides techniques to deal with dynamic interfaces such as Ajax and JavaScipt by adding ARIA properties and states that descibe the state that a widget is in, live areas receive frequent updates, and interruption policies so users can be notified when something critical has changed.

For instance if you are using AJAX to update a portion of the page, in the current state of affairs a person using certain assitive technologies could either not know that something critical on the page had changed or might be forced to reread the entire page when an insignificant change occurred. Ideally these properties and states will be added to toolkits such as Dojo, jQuery and MooTools so that they will automatically be available.

Properties may also be used to mark up forms with a consistant way of indicating required fields and other validation behaviors. It also greatly facilitates keyboard usage by allowing focus on tags that couldn't get it before.

ARIA roles provide a way to identify different areas of the page, such as header, navigation, & main content. They also provide a way to identify types of widgets so agents/users will know how to deal with them. Assistive technologies will use this to develop methods which allow easier access directly to given areas. Ordinary browsers will be able to provide usability gains not only to people with disabilities but to other users as well.

It is the ARIA roles that I have added to the template.

Who uses ARIA right now?

IE8, Firefox 3.2+, Opera 10 beta, Safari 4 all have some support for ARIA roles. Steve Faulkner has a blog detailing the current state of support.  Many assistive technologies have already started supporting it.

Support for the dynamic interfaces will mostly be coming through the JavaScript toolkits. According to the Paciello Group, a number of toolkits including Dojo, YUI, and jQuery have implemented or are in the process of implementing ARIA. Unfortunately, MooTools is not on that list.

Details are in the links below.

How to you specify ARIA roles?

Roles are specified by adding the role attribute:

<div role="main" id="content">

What are the issues with using ARIA roles?

W3C is the one defining the use of ARIA, however since ARIA is being developed after HTML 4.1 or XHTML 1.0, the "role" attribute is not part of the validation for (x)HTML so if you define ARIA roles your pages won't validate.

The current workaround is to use JavaScript to add the roles to the DOM. This way the pages will validate while still allowing use of the roles. My standardista soul shutters at this idea and it also leaves out those without JavaScript, but for the moment seems to be the best compromise. This is the path that Angie Radtke used for the accessible Beez template in 1.6 and it is the path that I took. I used the JavaScript from Beez as a basis for my template.

Other routes are to create a XTML plus ARIA spec that you point to as the validator or to use

How do ARIA roles and the new HTML5 tags compare?

HTML5 has added new tags such as header, nav, article, section, aside and footer. While there are many more ARIA roles than there are special tags in HTML5, there is some overlap. For instance navigation, contentinfo, and complementary overlap with the HTML5 nav, footer and aside. It is suggested that both be specified until browser agents and assistive technologies incorporate full support for HTML5. Even then you will want to continue using the roles that aren't specified by HTML5.


2009 is the year the ARIA is finally growing up. The final working draft has been prepared, browsers have started supporting it, some JavaScript toolkits have implemented it and others are working on it. This is a non-intrusive aid to accessibility that should become a standard part of the web developers tool bag. It's not just people who need to use screen readers that benefit from this but also all people who need to use a keyboard to navigate the web.

Further Reading


Other sources of information