Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to:
See User Agent Support for WAI-ARIA for general information on user agent support.
Jaws 13+ support Example 1 with IE and FF
NVDA 2012.3 supports both Example 1 and Example 2 with FF
Editorial Note: The Working Group is still discussing whether it is appropriate to use various aria attributes to provide text alternatives for images without providing an alt attribute. This technique is included to invite public comment and help the working group come to a conclusion about this technique as well as related items (e.g. 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"). Examples within ARIA10 demonstrate situations where it might be desirable just to use aria-labelledby with no alt attribute. We solicit feedback on this example and on the general issue.
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.
Note: When using aria-labelledby attribute on an img element, the absence of an alt attribute will cause validation failures for HTML 4 and earlier and XHTML. If alt is provided, it must contain the same text as the aria-labelledby target. Do not use alt="", which would cause some assistive techology to ignore the image completely.
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.
<img src="sunflowers.jpg" aria-labelledby="flower_id">
...
<span id="flower_id">Van Gogh's oil painting of sunflowers</span>
hangs in Amsterdam's Van Gogh museum.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>Resources are for information purposes only, no endorsement implied.
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.
#2 and #3 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques. For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0.