A case for some Accessibility in our CSS

On Tuesday, John Foliot posted a little question on twitter.

Question: why *CAN'T* we add ARIA directly to CSS? I haz use-cases | @glazou @mollydotcom @fantasai @tabatkins

— John Foliot (@johnfoliot) July 17, 2012

At first I thought this would be a bit crappy, adding accessibility to CSS which is for presentation sounded like a horrendous idea. Myself, John, Molly and Jen discussed this on the twitters a little further and I was still left not convinced. It seemed a horrible hack to try and get lazy assed developers to include aria roles to their sites. As I pointed out, if developers are lazy enough to not include all the relevant prefixes, they'd probably not include this either (which is quite sad, really).

There was discussion that CSS is for presentation only, but i think with the onset of CSS3 animation whizz-bangs etc. we can adapt.

Roll on a few days.

I'm currently sub-contracted by a client for some front-end development and consultancy on a site that's got a huge mega-nav, dropdown, suckerfish wotsit. It's huge, really huge and, of course, I wanted to make it accessible as possible. So I've added the relevant aria roles menu, menubar and menuitem. There were a lot of menu-items it got boring, very boring. I did use find and replace to help, luckily. So I was warming to John's idea around his question.

How can it be done?

I tweeted that I was warming to it and struck up another quick conversation with John. He said that a colleague had suggested using attr as a CSS declaration. I think this makes perfect sense. So, for example, we've got a menu with 7 main menu links of which these have sub-menus containing 30 links. So that'd be 38 aria roles that need adding to your HTML.

An aside...

Adding all of that, those 38 aria roles to your HTML can make it look a little pale. Although correct, it'd even be cleaner if it was in the CSS. But I digress.

In the CSS.

So back to the CSS. To add the aria roles to the page now we could just write 3 lines of code within the CSS rather than 37 bits of code sprinkled around HTML.


nav { attr: menu; }
nav ul { attr: menubar; }
nav li { attr: menuitem; }

It's pretty easy isn't it? It's actually quite clean too. We could even use that for footer navigation too. This way our markup is lean, our CSS is snazzy and we're doing our best for accessibility, which is no bad thing.

What now?

I don't really know, I guess someone (me?) needs to write this all up nicely and put it to the CSS working group. I haven't (currently) the time for this but hopefully I can make a start.

What about you?

What do you think? Bad idea? Good idea? A problem that doesn't need solving?