This technique applies to HTML with Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to Success Criterion 1.1.1: Non-text Content (Sufficient).
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.
Example 1: Providing a short description for a complex graphic
This example shows how to use the
aria-labelledby attribute to provide a short text description for a read-only complex graphic of
an 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>
Working example: Providing a short description for a complex graphic.
Resources are for information purposes only, no endorsement implied.
- Examine each element where the
aria-labelledbyattribute is present and the element does not support the
- Check whether the value of the
aria-labelledbyattribute is the id of an element on the web page.
- Determine that the text of the element identified by the
aria-labelledbyattribute accurately labels the element, provides a description of its purpose, or provides equivalent information.
- #2 and #3 are true.