Using aria-labelledby to provide a text alternative for non-text content
- 1 Nov 2012: TF FtF says this technique needs additional work.
- 1 Nov 2012: Ready for TF review
- Surveyed by WG 10 Jan 2013
User Agent notes
- Jaws 14 supports this technique; also JAWS 13?
- NVDA 2012.3 supports this technique
This technique applies to HTML with WAI-ARIA.
This technique relates to:
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 makes it possible to associate an element with a piece of text that is visible elsewhere on the page. The text of the element identified by aria-labelledby is used as the name of the element by assistive technology such as a screen reader.
This example shows how to use the aria-labelledby attribute to provide a short text description for an image, using a piece of text that is visible on the page. Note: The alt attribute must also be included in conforming documents.
<p> <img src="sunflowers.jpg" alt="Van Gogh's painting of sunflowers" aria-labelledby="label"> <span id="label">Van Gogh's oil painting of sunflowers</span> hangs in Amsterdam's Van Gogh museum.</p> </p>
This example shows how to use the aria-labelledby attribute to provide a short text description for a complex graphic of an organization chart; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the orgnization chart.
<div role="img" aria-labelledby="label"> <img src="part1.png" alt=""/> <img src="part2.png" alt=""/> <img src="part3.png" alt=""/> <img src="part4.png" alt=""/> <img src="part5.png" alt=""/> </div> <div id="label">Organizational chart</div>
- Examine each element where the aria-labelledby attribute is present.
- Check whether the value of the aria-labelledby attribute is the id of an element on the web page
- 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.
- Checks #2 and #3 are true.