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.
What DOCTYPE needs to be used with these attributes in order for the markup to validate?
Neal G [April 1st, 2009, 23:34]
Hi Neal. Good question! Steve Faulkner answers it pretty comprehensively. FWIW, I would start to use the HTML5-compatible doctype where possible:
<!DOCTYPE HTML>
Peter [April 2nd, 2009, 00:04]
Old post but a great start to getting into ARIA. I’m still looking for more, up-to-date info.
Brad [December 23rd, 2011, 22:36]