ARIA attributes are a robust alternative to arbitrary class names when applying styles and behaviors to your markup. When you use ARIA attributes to target elements, you introduce accessibility support while standardizing your markup.
Non-standard class names
As a web developer, you may often find yourself toggling a class name with javascript to apply CSS, like so:
[gist id=6452923]
[gist id=6452738]
The Problem
This approach adds a non-standard class name, .hidden, that we rely on for our behavior. On large teams, this non-standard naming introduces the risk for redundant CSS rule definitions, and in complex widgets it creates ambiguity in meaning of class names.
ARIA alternative
I’d like to propose the following alternative to non-standard class names, using WAI-ARIA attributes:
[gist id=6452897]
[gist id=6452831]
Try it at http://jsfiddle.net/sAuBd/.
The Outcome
Instead of adding a non-standard class name, we’ve targeted an ARIA* attribute using CSS3 attribute selectors and jQuery. This approach has the combined effect of standardizing our view markup, removing ambiguity for developers, and baking in accessibility features into our application.
Taking it further
Using ARIA attributes as a targeting mechanism is a strategy that can be extended to apply to a variety of common UI and behavioral patterns. Consider a framework like jquery-aria to modularize your ARIA behaviors.
* ARIA stands for Accessibility for Rich Internet Applications. It is a specification defined by the W3C to support additional semantic meaning for assistive technologies. In the case of aria-hidden, it instructs a screen reader to ignore the content.
