Accessible UI Widgets using ARIA

September 5, 2013 Cameron Cundiff

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.

About the Author

Biography

Previous
Pivotal People: Code for America's Pivotal Data Science Fellow Ezra Spier
Pivotal People: Code for America's Pivotal Data Science Fellow Ezra Spier

Now in its third year, the Code for America fellowship program boasts 28 developers, designers, civic techn...

Next
In-Memory Data Grid + Hadoop:  Integrated Real-Time Big Data Platform Previewed at SpringOne 2GX 2013
In-Memory Data Grid + Hadoop: Integrated Real-Time Big Data Platform Previewed at SpringOne 2GX 2013

In this post, Chief Architect, Jags Ramnarayan, explains some of the possibilities of placing an in-memory ...

×

Subscribe to our Newsletter

!
Thank you!
Error - something went wrong!