Beginning ARIA mark‐up

Warning This article was written over six months ago, and may contain outdated information.

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.

3 comments on
“Beginning ARIA mark‐up”

  1. What DOCTYPE needs to be used with these attributes in order for the markup to validate?

  2. Hi Neal. Good question! Steve Faulkner answers it pretty comprehensively. FWIW, I would start to use the HTML5‐compatible doctype where possible:

    <!DOCTYPE HTML>

  3. Old post but a great start to getting into ARIA. I’m still looking for more, up‐to‐date info.