Revised Using aria-labelledby to provide a text alternative for non-text content

Status

• 20 Feb 2014: Modification made to ARIA 10 based on special working group meeting
• 25 Feb 2014: Accepted as amended by WG
• 25 Feb 2014 added to XML by AWK

User Agent Notes [To be published separately]

• Support for Example 1 needs to be tested
• NVDA 2012.3 supports Example 2 with FF

As of Feb 2014, there is much wider accessibility support for the use of the alt attribute than for aria-labelledby. The use of the alt attribute is best practice and strongly encouraged. Especially for elements where the alt attribute can be used to provide text alternatives, authors must confirm accessibility support for aria-labelledby for their target audience before relying on this technique in place of H37: Using alt attributes on img elements.

Applicability

This technique applies to HTML with WAI-ARIA.

This technique relates to:

• Success Criterion 1.1.1 (Text Alternatives)
  • Understanding SC 1.1.1
  • How to meet SC 1.1.1

Description

The purpose of this technique is to provide a short description for an element that can be read by assistive technologies (AT) by using the aria-labelledby attribute. The aria-labelledby attribute associates an element with text that is visible elsewhere on the page by using an ID reference value that matches the ID attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the aria-labelledby attribute as the text alternative for the element with the attribute.

Examples

Example 1

This example shows how to use the aria-labelledby attribute to provide a short text description for a read-only complex graphic of a star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.

<div role="img" aria-labelledby="star_id">
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="emptystar.png" alt=""/>
</div>

<div id="star_id">4 of 5</div>

Live example here

Resources

• WAI-ARIA 1.0 Authoring Practices
• HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation
• Accessible Rich Internet Applications (WAI-ARIA) 1.0, Section 5.2.7.3. Text Alternative Computation

Related Techniques

• H37: Using alt attributes on img elements
• F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type image

Tests

Procedure

1. Examine each element where the aria-labelledby attribute is present and the element does not support the alt attribute.
2. Check whether the value of the aria-labelledby attribute is the id of an element on the web page.
3. Determine that the text of the element identified by the aria-labelledby attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.

Expected results

• Checks #2 and #3 are true.