Bind complex images to long descriptions using aria-describedby
no. 060
Make sure aria-describedby is used to explicitly associate long descriptions to complex images
Complex images require two levels of information to be considered fully accessible: first, a descriptive ALT attribute value explaining the purpose or nature of the complex image, and second, a full text description of the complex image’s content, properly structured using HTML markup. But when both levels of information are independently set, another mechanism needs to be provided, so assistive technologies can explicitly associate both levels of information in a way that can be programmatically determined.
To do so, simply rely on the aria-describedby property to bind the complex image with its adjacent long description, or the link leading to this long description. Doing so will automatically connect the two components together, ensuring that when focus is set on the image, users of assistive technology also hear about the existence of a second, much more detailed level of information, which may otherwise be missed.
User Story
As a non-sighted user using assistive technology, I want to rely on a reliable mechanism to inform me whenever long descriptions are provided for complex images, so that I never miss the complementary information.
Simple Code [...]