his post originally appeared on the Yahoo! Accessibility blog.accessibility-205x85
ARIA is a W3C specification that can be used to dramatically improve the accessibility of custom widgets, especially for users of screen readers. For those unfamiliar with ARIA this article aims to explain the unfamiliar through the lens of the familiar: existing HTML widgets.
The goal is to train developers how to think about ARIA widgets such that using ARIA feels familiar and natural—something all developers can feel confident using and making part of their everyday toolkit.
In the interest of being as concise and straightforward as possible, without being overly pedantic this article will be limited in scope to the markup and styling for ARIA widgets. Keyboard access for ARIA widgets, while an important topic, has been intentionally left out since it is a broader topic deserving an article of its own, and the implementation guidance varies between devices (mobile and desktop) and platforms (Mac and Windows).
ARIA provides additional semantics beyond what is available in current implementations of HTML. As the spec indicates, it's a bridging technology-filling gaps between versions of the HTML specs. For example, neither HTML 4 or 5 provide a toolbar or dialog widget, but both can be declared using ARIA. Consider the following two examples:
As illustrated in the examples, ARIA widgets are declared by applying the
// Using native DOM
// Using jQuery
// Using YUI
type attribute, the ARIA
role attribute can only be set to one of several predefined values. In the interest of Progressive Enhancement, when building custom widgets always start with the closest native semantics and supplement with ARIA. Consider this tree widget that uses a