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
If the image fails to load,
alt text is used as a placeholder
so users have a sense of what the image was trying to convey.
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="...">
Using the aria-label attribute and
Using the aria-labelledby attribute.
Tips for writing effective
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.