Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute.
How the Lighthouse image alternative text audit fails #
<img> elements that don't have
The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.
How to add alternative text to images #
alt attribute for every
<img> element. If the image fails to load, the
alt text is used as a placeholder so users have a sense of what the image was trying to convey. (See also Include text alternatives for images and objects.)
Most images should have short, descriptive text:
<img alt="Audits set-up in Chrome DevTools" src="...">
If the image acts as decoration and does not provide any useful content, give it an empty
alt="" attribute to remove it from the accessibility tree:
<img src="background.png" alt="">
You can also use ARIA labels to describe your images, for example,
<img aria-label="Audits set-up in Chrome DevTools" src="..."> See also Using the aria-label attribute and Using the aria-labelledby attribute.
Tips for writing effective
alt text #
alttext should give the intent, purpose, and meaning of the image.
- Blind users should get as much information from alt text as a sighted user gets from the image.
- Avoid non-specific words like "chart", "image", or "diagram".
Learn more in WebAIM's guide to Alternative Text.
- Source code for Image elements do not have
- Images must have alternate text (Deque University)