Short note on aria-labelledby and aria-describedby

Posted on Tuesday, 12 May 2015 by Steve Faulkner

The ARIA attributes aria-labelledby and aria-describedby can be used to provide an accessible name or accessible description for a subset of HTML elements. It is important to note that by design, hiding the content (using CSS display:none or visibility:hidden or the HTML hidden attribute) of the element(s) referenced by these attributes does not stop the content from being used to provide the name/description.

Hidden or visible – makes no difference

By default, assistive technologies do not relay hidden information, but an author can explicitly override that and include hidden text as part of the accessible name or accessible description by using aria-labelledby or aria-describedby.
Accessible Name and Description: Computation and API Mappings 1.1

In the following example the description will be available to assistive technology users in both states:

Non error state: message not visible

<label>Name <input type="text"  aria-describedby="error-message"></label>
<span id="error-message" style="display:none">
You have provided an incorrect name</span>

Note: addition of aria-hidden=true to the referenced element makes no difference:

<span id="error-message" style="display:none" aria-hidden="true">
 You have provided an incorrect name</span>

Error state: message visible

<span id="error-message" style="display:inline">
You have provided an incorrect name</span>

Methods to provide context sensitive name/description text

If you want to associate context sensitive text, such as an error message you can:

  • Add the referenced element to the DOM when the error state occurs.
  • Add the error text as child of the referenced element in the DOM when the error state occurs.
    • non error state: <p id="error1"></p>
    • error state: <p id="error1">incorrect mallory!</p>
  • Add the id reference in the DOM to the aria-labelledby/aria-describedby attribute, when the error state occurs.

Further reading: Notes on Using ARIA in HTML

About Steve Faulkner

Steve is the Technical Director at TPG. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including HTML 5.1, ARIA in HTML, Notes on Using ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility.

Comments

  1. Hi there,
    I am trying to understand what work is required to achieve AA Accessibility standard to a web application. Is there a checklist available somewhere I can grab and use as a reference for the work required on each module?

    thanks a lot!

Comments for this post are closed.