Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to Success Criterion 1.1.1: Non-text Content (Sufficient).
The objective of this technique is to provide descriptions of images when a short text alternative does not adequately convey the function or information provided in the object.
A feature of WAI-ARIA is the ability to associate descriptive text with a section,
drawing, form element, picture, and so on using the
aria-describedby property. This is similar to the
longdesc attribute in that both are useful for providing additional information to help users
understand complex images. Like
longdesc, descriptive text provided using
aria-describedby is separate from the short name provided using the
alt attribute in HTML. Unlike
aria-describedby cannot reference descriptions outside of the page containing the image. An advantage
of providing long descriptions using content from the same page as the image is that
the alternative is available to all, including sighted people who do not have assistive
technology. It is worth noting that as of the time of writing (October 2013) some
assistive technologies read
aria-describedby content immediately after an image's alt attribute information without user activation
- whereas most implementations of
longdesc require the user to take explicit action to read the additional description.
aria-describedby can accept multiple ids to point to other regions of the page using a space separated
list. It is also limited to ids for defining these sets.
Example 1: Describing an image
The following example shows how
aria-describedby can be applied to an image to provide a long description, where that text description
is on the same page as the image.
<img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1"> <p id="p1">This painting dates back to 1730 and is oil on canvas. It was created by Jean-Guy Millome, and represents ...</p>
Resources are for information purposes only, no endorsement implied.
- Examine each image element where a
aria-describedbyattribute is present.
- Examine whether the
aria-describedbyattribute programatically associates an element with its text description, via the
idattribute on the element where the text to be used as the description is found.
- Examine whether the combined text equivalent and associated text description accurately describe or provide the equivalent purpose to the object.
- #1, #2, and #3 are true.