Goal
Ensure that everyone has access to a text description of complex imagery above and beyond the (short) alt attribute of an image.
Why it’s important
Icons usually have short descriptions, such as “Warning” or “Delete”, that are appropriately-sized for an alt attribute.
Charts and infographics, on the other hand, can rarely be summed up in a short sentence without losing meaning.
To provide the longer context that people using screen readers (and for that matter, everyone else) may need, we must provide a long description on the page or in the immediate vicinity of the complex image.
How to implement
UX Designers
See Providing a location for a long description for instructions.
Developers
Make sure to implement the long description as described by your UX Designer.
This generally won’t occur a new component — the goal of this test is not to provide a new treatment for the component, it’s to remember to write the long description.
How to test
Content and usability testing
- Disable or remove the image from the page.
- Put it in front of users.
- Ideally these are users reliant on screen readers, or readers with cognitive disabilities who may struggle to understand imagery.
- If you can’t test with the above, testing with users who can’t see the image because you removed it will do.
- Confirm users can find the long description.
- Confirm users understand the page with only the long description’s guidance.
Manual testing
See Providing a location for a long description for more information about the types of places you may find a long description.
- Identify images that are complex enough they need alt text longer than 150 characters. Your Writer should be able to tell you which images are affected.
- Confirm that a long description matching the Writer’s requirements is available in the location outlined by the UX Designer’s documentation.
- Confirm that the long description makes sense. If it doesn’t make sense to you it almost certainly won’t make sense to you users.