Ensure that assistive technology can identify the long description of a complex image such as a chart or an infographic.
Why this matters
As we established in Providing a location for a long description, the
longdesc attribute of an
<img> will be programmatically available for screen reader users (assuming it’s supported by their screen reader) but isn’t available for sighted users.
On the other hand, a
<p> element is available for both screen reader users and sighted users — but it’s not programmatically associated with the
<img>, so the screen reader can’t connect the user directly to it.
The solution is to programmatically connect the
<img> with its long description
<p> (or other element) using the
aria-describedby attribute and the
id of the
How to implement
Follow the implementation instructions at Using the aria-describedby attribute by MDN.
How to test
- Right-click and inspect the complex image.
- Confirm that the complex image has an
aria-describedbyattribute in its
<img>element, and that the long description’s element
idis the same one listed as the value of the