Is the long description programmatically associated with the image?

Goal

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

How to implement

Follow the implementation instructions at Using the aria-describedby attribute by MDN.

How to test

1. Right-click and inspect the complex image.
2. Confirm that the complex image has an aria-describedby attribute in its <img> element, and that the long description’s element id is the same one listed as the value of the aria-describedby attribute.