ARIA Highlighting Extension

I was mucking around with Opera Extensions, largely to get a grip on how they work, and decided to make an extension that exposes ARIA information in a page, as I was travelling Australia and talking HTML5 and ARIA with ARIA-expert Steve Faulkner.

Here's a very early alpha 1 version of the ARIA debugging Opera extension. It's not pretty, and it's not well-architected (the beta is better), but you can get an idea of the basic functionality. I'm looking for comments on the functionality it offers rather than how it accomplishes it or the aesthetics of the logo, buttons etc.

You can download the ARIA highlighter extension beta 1. It's made much more robustly, using some Opera Extension prototype templates that I encourage you to use as the basis for your extensions. (See also the full Opera Extensions documentation.)

If you install it in Opera 11, you'll see it adds a toolbar button with a couple of musical notes (Aria, geddit?). Pressing the button activates the extension. If you try it on my handy ARIA test page you can see the whole gamut of functionality:

Outline elements with ARIA attributes

These are currently outlined in green. I thought about popping up informational boxes, but decided against it; it would make the page look even busier. To find out more, right click and choose Inspect Element to see the DOM, stylesheets and layout with Opera Dragonfly.

Outline roles

ARIA roles are outlined in rakish blue. (Actually, any roles.) These are likely to be an important part of your page, particularly your document landmark roles. (See Gez Lemon's Introduction to WAI ARIA for more information.)

A yellow overlay tells you what kind of role it is. Some roles, such as main, banner and contentinfo are only allowed once on a page - think of them as analogous to HTML ids rather than classes. Therefore, the extension shows a severe red error if it finds duplicates of these roles.

I'm considering styling role=application differently, as that triggers special behaviour in the JAWS screenreader.

Elements that have an ARIA role=presentation are given 50% opacity. Be careful, though: not every thing inside a presentation role is presentational. Read (then re-read, then re-re-read) the explanation of presentation inheritance to learn more. Or be even more baffled, if you're like me.

Outline live regions

Live Regions are areas of the page that get updated with Ajax and screenreaders can choose to interrupt whatever they're currently telling a user (or not) depending on the "politeness" of the aria-live attribute. This is shown as a yellow overlay, and the live region has a dashed purple border. Basically, if you're updating part of the page with Ajax, you should consider having an ARIA live region there.

It seems like other ARIA roles (marquee/timer/log/status) imply special types of live region, so perhaps I should style those similarly? I need to read the spec more (which is an awful thought. This is a spec that defines abstract roles that you must not use and which cause validation errors. So what's the point, except to confuse?)

Show associations

ARIA has attributes aria-labelledby and aria-describedby. These attributes point to the id of another element on the same page that give more information. These assocations are shown. If the extension can't find an element with an id that matches a describedby or labelledby pointer, a forbidding red error is shown.

A future version of this might add a link to the element that describes or labels an element, so you can click and check it's the right one. But that might challenge my JavaScript.

Your feedback is solicited - you can leave an anonymous comment below.

(You might also want to check out the decidedly more polished HTML5 Outliner Extension that shows the HTML5 outline if your pages.)