Beginning ARIA mark-up

WAI-ARIA is a relatively new standard from the W3C, which provides semantic information to assisted screen reading technology. It’s fairly rapidly being adopted by browser makers and should become a part of your mark-up toolkit.

As well as being good for accessibility, it’s also useful to provide hooks for CSS and Javascript. Here are a just a couple of quick ways to get started using it.

Landmark Roles

Similar to the new structural elements in HTML5*, landmark roles are used to describe key navigational elements on the page. You apply them using the role attribute:

<div role="navigation">foo</div>

You can them style them in CSS by using an attribute selector:

div[role='navigation'] { color: red; }

ARIA-REQUIRED

Currently, we tend to use class=“required” to signify a required form input field. WAI-ARIA introduces the aria-required attribute to perform the same task:

<input type="text" aria-required="true">

As in the example above, we can also use the attribute selector to add a style to this:

input[aria-required='true'] { border-width: 2px; }

The only caveat with the above techniques is that — as with almost everything else we do nowadays — they don’t work in IE6. I’ll leave it up to you to decide if you think it’s worth the effort to provide a workaround.

* For a comparison of WAI Landmark Roles and HTML 5 Structural Elements see this post by Steve Faulkner. Bruce Lawson’s post has further detail.