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
Revision as of 21:28, 13 March 2013 by Lguarino (Talk | contribs)

Jump to: navigation, search


Status

User Agent notes

  • Jaws 14 supports this technique; also JAWS 13?
  • NVDA 2012.3 supports this technique

Applicability

This technique applies to HTML with WAI-ARIA.


This technique relates to:

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 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.

Examples

Example 1

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>

Example 2

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>

Resources

WAI-ARIA 1.0 Authoring Practices

Tests

Procedure

  1. Examine each element where the aria-labelledby attribute is present.
  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.