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.
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.
Other routes are to create a XTML plus ARIA spec that you point to as the validator or to use validator.nu.
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.