image-alt
Ensure <img>
elements have alternate text or a role of none or presentation.
Description
For screen reader users to understand the goal and meaning of each image, alternate text is required.
Why is it important?
All visual information, including images, is totally useless if a user is visually impaired unless a digital text alternative is offered, allowing screen readers to translate the text into braille or sound. For those who are color-blind or have low vision, the same is true to different degrees.
Even if an image only contains text, screen readers are unable to convert it into words that the viewer can hear. As a result, images must have brief, elucidating alt text for screen reader users to grasp the contents and purpose of the image.
Examples
-
Success:
- An
alt
attribute gives a clear explanation of the picture for users of assistive technology.
- An
-
Failure:
- No alternate text is provided for a picture. The file name used by assistive technologies to recognise the image is not descriptive. Some viewers won’t understand what the image is trying to say.
How to fix?
Ensure that every <img>
element has alternative text and either role="presentation"
or role="none"
attributes.
There are three main ways to add alternate text to an image:
- Using an
alt
attribute i.e.<img alt="drawing of a cat" src="...">
- Using an
aria-label
attribute i.e.<img aria-label="drawing of a cat" src="...">
- Using an
aria-labelledby
attribute i.e.<img arialabelledby="someID" src="...">
Tags
cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a, ACT
References
- WCAG 1.1.1: Non-text content
- Deque University: image-alt
- Accessibility Insights: image-alt
- Evinced Digital Accessibility Knowledge Base: image-alt
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!