Alternative text conveys the content of a graphical element, for example an image, as text so that it is available to assistive technologies, like screen readers.
Why Is This Important?
Some users are unable to see images and other graphical elements on the page. They need an image description that explains what is seen on the image or how it is used.
Checking for Basic WCAG Requirements
<img>element has an
That attribute is equivalent with the information in the image.
- If the image does something (for example sends a message), the performed function is explained.
- If the image is redundant to content on the page or only used for decorative purposes, leave the
If an SVG is used, its alternative text should be set using an
aria-labelattribute. Note: SVG testing should be its own check.
- Keep alternative text short and descriptive.
- Use punctuation marks like you would if they were embedded in sentences.
Tools & Bookmarklet
- Paul J. Adam’s Images Bookmarklet displays emoji and the alternative text so that it is easy to scan the page for issues.