And this is A WAI-ARIA "stylesheet", written Feb 22, 2009, and concerning JavaScript and the DOM, Web

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:

<script>
$(document).ready(function(){
  $("link[rel=aria]").each(function(){
    $.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;
          $(sel).attr("aria-"+bits[0].replace(/^\s+|\s+$/g,''), 
          bits[1].replace(/^\s+|\s+$/g,''));
        });
      });
    });
  });
});
</script>

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.

Comments

Ignacio

This somehow reminds me of this: http://yellowgreen.de/morecss.

I think your idea is great. Please keep working on it.

David

Why not a stylesheet? It is behaviour not layout.

The question to me is, why don't we have XHTML

Support in browsers, ad then we could use an aria

namespace instead of introducing random attributes

Eitan

The reason it is inline, and not a stylesheet is because it represents semantic information, just like vanilla HTML represents the document structure. The CSS, typically, should not represent semantics (although display:hidden, technically is).

Cool hack though!

Matteo

Would

be probably better as

Matteo

Yuck. Comments including tags in your blog haven't their html entities substituted; they're deleted.

Rosely

I think it's a wonderful idea! I've been fighting with the whole Aria thing and the fact that it doesn't validate (yet..).

Thinking of writing a script to add the attributes with JS, but if this actually works and gives the information to the screenreaders and such, that would be awesome!

Great work, please continue! :)

Ado

I like your thoughts. I'm agree with the way that you called it a .aria file as well. you should chat to the W3c about this as surely this would mean that the screen reader would implement the code "you wrote in jQuery" so as a developer you just have to create a .aria file and the users browser/screen reader will the manage the .aria file. its self.

if you write the CSS rules then the browser will manage this correctly.

Or an aria plugin for Firefox that knows how to read .aria files would be a solution (can you do that).

That way all websites can benefit with out having to have any javascript running.

Jim O'Donnell

It's a very neat idea, but aria attributes also describe state, so need to respond to events. I could see that working if there were CSS pseudoclasses along the lines of :selected, say, to describe state. But that seems like a whole new can of worms to me.

I've only played around a little with aria, but my approach is to set the arai attributes via event-handlers in javascript.

sil

Jim, all: the "aria stylesheet" reflects the initial state of the page, just as a CSS stylesheet does. If I have p { color: red; } in my stylesheet and then do document.getElementsByTagName("p")[0].style.color = "blue" in script, the stylesheet doesn't change. Nor would an "aria stylesheet".

Bruce Lawson’s personal site : The HTML 5 experiments

[...] to. Spurred on by Matt’s WAI-ARIA introduction, Langridge has come up with a proof-of-concept ARIA stylesheet and is looking for [...]

Jim O'Donnell

Stuart, won't a responsible javascript widget already be labelling the initial state in its initialisation code anyway? I guess I'm missing the advantage of seperating out the initial state into a CSS file, then handling subsequent state changes with javascript.

Ado: "That way all websites can benefit with out having to have any javascript running." ARIA doesn't really add anything to a static page, so I don't think there's any benefit in adding ARIA descriptions if javascript isn't running.

Mark Kawakami

OK, this is a really interesting way of looking at ARIA, and I think it definitely could be useful (not just for keeping your HTML clean, but also because it makes for easier and more flexible ways to add ARIA to existing pages).

I think you're really close, but using CSS's syntax for aria attributes is causing both a conceptual problem (ARIA provides additional semantic description of content, whereas CSS provides instructions for how those semantics should be presented by different media), and an engineering problem (fault-tolerant CSS parsing in JS). Finally, it demands that the rules be stored in a separate file which reduces performance (requiring another HTTP request) and makes it more difficult to keep the state of the values in sync across the ARIA stylesheet and the HTML page.

You can fix the first two issues and circumvent the third by using JSON instead of CSS. So ARIA rules would be expressed in an array like this:

[

{

"selector": "#first",

"role": "slider",

"described-by": "#second",

"min-value": 10,

"max-value": 30

{

"selector": "p + p",

"role": "main"

}

]

Parsing JSON is a solved problem, and it's a format intended for exactly this sort of data description. And you can deliver the JSON in any manner you want (hardcoded into the page, as an external script file, as an explicit XHR request or referenced in a link element).

Anthony Williams

Jesus... you don't hang about do you? That's incredible - and it could be applied to so many different things - the idea of "behaviour sheets" that I mentioned on Saturday, ARIA... any anything-sheet.

Whilst Bertrand Le Roy's blog (http://weblogs.asp.net/bleroy/archive/2009/01/18/javascript-behavior-sheets-an-experiment.aspx) seemed to have the idea, you've actually gone and implemented most of it. Very cool.

Thanks again for the talk!

Henny Swan

This looks like interesting stuff, thanks for the proof of concept Stuart.

It seems there has been some debate about this before on the WAI XTECH list (http://lists.w3.org/Archives/Public/wai-xtech/2008Jun/0024.html) in June of last year when Justin James proposed ARIA-ROLE and CSS definition integration.

Also on the WAI XTECH list this issue popped up again yesterday in response to Matt's suggestion and your blog post (http://lists.w3.org/Archives/Public/wai-xtech/2009Feb/0076.html).

Plenty of food for thought here especially around what this means in terms of separating content from presentation and what happens if a user has their style sheet disabled. There is, like you say, a clear benefit for keeping the mark-up down but whether it's via a separate style sheet entirely is debatable I think.

sil

Henny: thanks for the link. I've mailed the WAI XTECH list, because they seem to have misunderstood this hack somewhat!

as days pass by, by Stuart Langridge — Updates on the “ARIA stylesheet” hack

[...] ARIA “stylesheet” hack came up on the WAI-XTech mailing list. Some of my commenters here, and some of the people on the [...]

FTW Friday - 13 March 2009 | Border7 Studios

[...] A Wai-Aria “Stylesheet“: A how-to to do markup for stylesheet accessibility. [...]