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 <div id="myslider" aria-role="slider">. 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 <div id="myslider" aria-role="slider">, 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

<link rel="aria" href="first.aria">

to the head of the page, then include jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

and then finally have this snippet of code:

    $.get(this.getAttribute("href"), function(data) {
      $.each(data.split("}"),function(idx, stanza){
        var parts = stanza.split("{");
        if (parts.length != 2) return;
        var sel = parts[0];
        $.each(parts[1].split(";"), function(idx, directive) {
          var bits = directive.split(":");
          if (bits.length != 2) return;

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.

I'm currently available for hire, to help you plan, architect, and build new systems, and for technical writing and articles. You can take a look at some projects I've worked on and some of my writing. If you'd like to talk about your upcoming project, do get in touch.

More in the discussion (powered by webmentions)

  • (no mentions, yet.)