A WAI-ARIA “stylesheet”

Yesterday at the Multipack Presents event, [Matt Machell][] spoke about [WAI-ARIA][], which is a way of marking up HTML with accessibility hints. (Think of it as an accessibility microformat, pretty much.) Anyway, the way it works is by adding loads of new attributes to HTML: to say “this `div` is actually being used as a slider”, you say `

`. There are lots of similar new `aria-*` attributes: `aria-describedby`, `aria-minvalue`, and so on. Anyway, I asked: why did loads of new attributes get invented? Why not have an “aria stylesheet”, where instead of `
`, you put `#myslider { role: slider }` in a separate ARIA “stylesheet” file? And Matt said, hm, dunno, why don’t you write something to do that? So here it is. This is in no way complete. Requires jQuery, too. What you do is add

to the head of the page, then include jQuery:

and then finally have this snippet of code:

which takes an “ARIA stylesheet” which looks like #first { role: slider; described-by: #second; value-min: 10; value-max: 30; } p + p { role: main; } and applies the specified ARIA attributes to the specified elements, by CSS selector. This is rambunctiously untested, and the parser for the “stylesheet” is pretty noddy and not at all error-tolerant. If people find this useful as a concept then I’ll try and trick it up into something a bit better. [Matt Machell]: http://eclecticdreams.com/ [WAI-ARIA]: http://dev.opera.com/articles/view/introduction-to-wai-aria/