A follow up to my Easy ARIA tip #2

Community member Ben Millard has pointed out in a recent blog post that roughly the same as shown in my example can be achieved using regular HTML 4 by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some of the techniques that have been available for years escape even us gurus sometimes. But then, we don’t dig through every W3C doc on a regular basis, either.

However, the implementers of Firefox accessibility have done their homework: Ben’s examples work nicely with Firefox 3. The association is made properly, the label accessible is built up fine, and the input accessible gets its accessible name defined correctly. I also tested with that other browser that came with my Windows XP, and users there are less fortunate: IE does not properly make up the accessible name for the label and also does not correctly associate the accName of the input type with the label’s full content.

So, does Ben’s example now completely obsolete the need for the aria-labelledby and aria-describedby attributes? Most definitely not! There may always be cases where nesting the input into the label is impractical/not wanted, or where the description cannot be so nicely densed into the label as Ben shows using my example. For those cases where you explicitly need to specify something to become the accDescription, you definitely can still use ARIA. You can even use aria-describedby inside an input that’s nested within a label. 🙂

Easy ARIA tip #2: aria-labelledby and aria-describedby

Sorry it took me so long to get back to it, but here it is, my second tip on the usage of some easy ARIA markup to make your sites more accessible.

Imagine this: You have a form where you ask your user a question, but the answer is actually part of the sentence the question is made of. A classic example we all know from our browser settings is the setting “Delete history after x days”. “Delete history after” is to the left of the textbox, x is the number, for example 21, and the word “days” follows the textbox, actually forming a sentence that is easy to understand.

If you’re using a screen reader, have you noticed that, when you go to this setting in Firefox, it actually tells you “Delete history after 21 days”?, followed by the announcement that you’re in a textbox, and that it contains the number 21. Isn’t that cool? You do not need to navigate around to find out the unit. “Days” could easily be “months” or “years”, and in many ordinary dialogs, there is no way to find this out other than navigating around with screen reviewing commands.

Well, we have to thank Aaron and all the other great people who invented ARIA, for this capability! The solution is in an ARIA attribute called aria-labelledby. Its parameter is a string that consists of the IDs of the HTML or XUL elements you want to concatenate into a single accessible name. Yes, you read right, this not only works in HTML, but in XUL, too!

A second attribute that works very similarly is called aria-describedby. It can also take IDs of one or more elements to make up an additional description. In Microsoft Active Accessibility, this is converted into the AccDescription of the element. Some screen readers like NVDA pick this description up and speak it automatically after the name and type of the control, assuming that this information is giving the visually impaired user additional information that a sighted user also gets.

aria-labelledby and aria-describedby are both specified within the element that is to be labelled, for example an html:input or a xul:textbox. In both cases, the label for/label control bindings that may also exist, are overridden by aria-labelledby. If on an HTML page you provide aria-labelledby, you should also provide a label for construct to also support older browsers that do not have ARIA support yet. With Firefox 3, your blind users will automatically get the better accessibility of the new attribute, but the users of older browsers are not left in the dark this way.

And here is an example I made up for demonstration purposes:

minutes

Allows you to specify the number of minutes of inactivity after which your computer should shut down.

A Note for JAWS 8 users

JAWS 8.0 has its own logic to find labels, causing it to always override the accessibleName the textbox of an HTML document gets. With JAWS 8, I have not found a way to get it to accept the label from the example above. But NVDA and Window-Eyes do it just fine, and Orca on Linux also has no problems.

Previous Easy ARIA tips
  1. aria-required