WAI-ARIA, the W3C’s specification for Accessible Rich Internet Application, provides web developers with a means of annotating page elements with the roles, properties, and states that define exactly what those elements do. The added definitions help screen readers and other assistive devices navigate through your website.

We’ve previously looked at how WAI-ARIA can help you build more accessible websites, and showed you how the role attribute can help browsers understand what an HTML element is being used for. Nice as both of those techniques are, neither is much help if browsers and screen readers don’t support them.

In the past support for WAI-ARIA has been spotty, but as Web Accessibility Consultant Steve Faulkner recently found, WAI-ARIA’s landmark roles are now well supported in nearly every browser and screen reader. There are a couple of exceptions to be aware of, namely role="form" is not widely supported, and the older Window Eyes 7.5 screen reader hasn’t been updated (and likely never will) to support roles.

Still, despite the lack of the support in Window Eyes 7.5, WAI-ARIA roles are largely ready for prime time. That means you can start using roles in your HTML5 today. For example, you might have something like this for the main navigation on your site:

<nav>
    <ul>
        <li>Home</li>
        <li><a href="/about/">About</a></li>
        ...etc...
    </ul>
</nav>

While it might seem that the nav tag would defining the nav element’s role, not every browser will understand it (just because the browser can display it, does not mean it understands the tag). Also, the purpose of a navigation element may be obvious to most users, but to a screen reader being used by somebody who can’t see, the navigation strip could be just a jumble of words. Leveraging WAI-ARIA’s syntax, we can double up to ensure screen readers will know that this chunk of code is navigation:

<nav role="navigation">
    <ul>
        <li>Home</li>
        <li><a href="/about/">About</a></li>
        ...etc...
    </ul>
</nav>

Of course there are other benefits to adding roles to your page, like the ability to style the elements with CSS. Sticking with the example above, we could target this specific nav element using code like this:

nav[role="navigation"] {
    margin: 0
    ...etc...
}

Using roles to style your CSS eliminates the need for extra IDs or classes and often makes for more readable CSS since the role definitions are easy to understand, even years later.

Of course, while browser support has improved significantly over the last year or so, WAI-ARIA roles are not without a few glitches and gotchas. Be sure to read through Webmonkey’s earlier post on building a more accessible web with WAI-ARIA, and of course, look over the W3C’s WAI-ARIA role spec, which has more examples and guidelines for when and where to use WAI-ARIA roles.

Italian Masks photo by Peter Lee/Flickr/CC