What is ARIA?
Why use ARIA?
By including ARIA accessibility features on your website you are enhancing the accessibility of your site or application. By including roles, states and properties, ARIA enables the developer to make the code semantically richer for the assistive technology user. ARIA enables semantic description of element or widget behavior and enables information about groups and the elements within them. ARIA states and properties are accessible via the DOM.
Similar to including the
The easiest to include and most important properties of ARIA are the inclusions for the
role attribute, and inclusion of states and properties.
How to incorporate ARIA
- Use XHTML the way it was meant to be used wherever possible. Limit ARIA usage to augment XHTML: only use it when XHTML does not support all the semantics required .
- Apply ARIA the role attribute in cases where the XHTML needs to be semantically enhanced and in cases where elements are being employed outside of their semantic intent. This includes setting up relationships between related elements (grouping)
- Set ARIA states and properties. Set the properties and initial state on dynamically and user changing elements. States, such as “checked”, are properties that may change often. Assistive technology that supports ARIA will react to state and property changes. role changes, on the other hand, may confuse the assistive technology
- Support full, usable keyboard navigation. Elements should all be able to have keyboard focus. I am not covering this here, but you can read up on this at For a more in-depth understanding of keyboard navigation see ARIA Best Practices
- Make the visual user interface visually match the defined states and properties in browsers that support the ARIA CSS pseudo-classes.
role attribute enables the developer to create semantic structure on repurposed elements. While to a sited user, the above example of a
span repurposed as a checkbox is not noticeable, the
role attribute makes this seemingly non-semantic mark up accessible, usable and interoperable with assistive technologies. Two notes about roles: 1) once set, a role should not be dynamically changed, since this will confuse the assistive technology, and 2) roles take precendence over element default semantic meaning.
Example: Your designer insists that they want the checkboxes on your page to look a certain way. “Impossible” you say. You know that you can use CSS to make a span look like a checkbox. The sited user would never know that your weren’t using
<input type="checkbox"...., but for accessibility concerns, you know a screen reader user will not know it’s a checkbox. With the ARIA role attribute included in your code, a both a browser and screen reader that support ARIA, you can make your repurposed span accessible with:
Implementation of the ARIA role attribute
<ul role="navigation"> <li><a href="mypage.html">My Page</li> <li>....</li> </ul>
Values for the ARIA
role attribute (For descriptions, roll over the items below)
Note: when i have time to populate a dB, i will add a little ajaxian explanation as to the possible parents and children of each role. In the meantime, please visit WAI-ARIA Roles.
ARIA states and properties
Whereas roles are a static attribute of elements, states are properties that can change with user and server interactions. Properties include both dynamic states that need to be updated, and static properties, such as “required”.
Values for the ARIA States (For descriptions, roll over the items below)
Values for the ARIA Properties (For descriptions, roll over the items below)
Certain properties belong with certain roles. For example,
autocomplete makes sense with the roles
textbox. The value of the property or state is also limited to certain value types. In our
autocomplete example, the value would need to be selected from a list of predetermined values, whereas a
checkbox could have a state of
checked, to name a few, with a bolean as the value.
Working with ARIA in Rich Internet Applications
ARIA and Live Regions
Live regions are sections of a web page or application that change dynamically either thru automatic updates or user interaction.
There are 5 properties specific for Live Regions:
Politeness levels: Should ARIA intrude on the user on updates?
The value of the “live” state are expressed in terms of “politeness” levels. “Polite” regions notify of updates but do not interrupt users, and updates take low priority. A level of “rude” would indicate that the assistive technology should interupt the users current action to provide update information. A good example of using a polite level would be the ticker on a financial page — the user does not need to be interupted every 10 seconds to be informed as to whether a stock value has change. An example of a time to use a “rude” level is when the user has completed a step in a checkout process and the next step is visible. Values: Off, Polite, Assertive, Rude.
Validating your XHTML when including un-speced attributes
This section is not finished
There is a tweak that you need to make in your XHTML page if you include ARIA: you need to use XHTML 1.1 and include the ARIA module in your header area. XHTML 1.0 does not support modularization. The ARIA States and Properties attributes will be understood by user agents in XHTML 1.0 by declaring and using the appropriate namespace the same as for XHTML 1.1, but such documents will not validate to the XHTML 1.0 DTD. None of the DTD snippets below enable validation, but I will update when the modules and/or specifications are updated:
- ARIA and HTML: HTML 4.01 is non-extensible, so you can’t use namespaces for the property and state names. Please view the specs as they become available to see the HTML 4.01 support for ARIA.
Note: This blog is still in development, but it’s come a long way, and it is likely already a bit helpful. I will be adding more example snippets and more about live regions and handling dynamic changes, so come back next week if you want to read more. The original post was 03/12/08 but I’ve reposted it since WAI-ARIA is finally being better supported by YUI, Dojo, jQuery, IE8, Safari 4, and other browsers.