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:

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

flattr this!

This entry was posted in Accessibility, ARIA, Firefox and tagged , , , , , . Bookmark the permalink.
Skip to top


19 Responses to Easy ARIA tip #2: aria-labelledby and aria-describedby

  1. Pingback: Easy ARIA Tips from Marco Zehe - The Paciello Group Blog

  2. James Craig says:

    VoiceOver now supports this with the latest WebKit nightlies.

  3. Pingback: protofunc() » Aria Grundlagen

  4. David Bolter says:

    This tip has longevity, thanks again Marco.
    @James Craig, great stuff.

  5. Pingback: Introduction à WAI ARIA (traduction) | Les intégristes

  6. Pingback: cookiecrook (James Craig)

  7. Pingback: Easy ARIA Tip #5: aria-expanded and aria-controls « Marco’s accessibility blog

  8. Pingback: Writing accessible HTML forms | LearnAccessibility.org - This is a platform to learn about Accessibility

  9. Bernd says:

    Not easy to understand since i am a beginner in this topic… Can u recommend some articles where i can learn more about aria? Google doesn’t give me the results i want..

  10. Fewos says:

    Hi Marco!
    As Bernd already mentioned it would be great to have some additional information about ARIA.
    I really admire your achievements and your blog and hope it will encourage many other visually impaired people as well!

  11. Marco says:

    There are numerous introductions to WAI-ARIA on the web. For example at dev.opera.com or at WebAxe. Look for authors like Gez Lemon, Chris David Mills etc.

  12. Pingback: Programmatically Determined | Blog | Accessible Culture

  13. If not, I’m new to this topic easy to understand after that … u recommend me some articles that can or can learn more about Aria? Google will not provide the desired results .. I

  14. Herbata says:

    I’m waiting for next articles about ARIA.

  15. Don says:

    I first found out about this trying to understand a web site that wasn’t working at all, the official web site of the General Court (state legislature) for Massachusetts, a US state.

    It was used for a table of links, none of which worked, and all of which mapped simply to “#”.

  16. Dan says:

    I am just getting into using ARIA – thanks for the practical intro :-)

    Do you know if it is ok to use the aria-describedby attribute with a fieldset element? The MS docs say yes, but I’m not sure what the other vendors say?

  17. Dan says:

    Also, what about on the form element? (would be useful as an intro to the form).

  18. Pingback: JavaScript Reference Links | kabayview.com

  19. Pingback: Accessible Client-side Form Validation with HTML5 & WAI-ARIA

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>