This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.
Using aria-labelledby to provide a text alternative for non-text content
From WCAG WG
- 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.