Informative elements should aim for short, descriptive alternate text.
Decorative elements can be ignored with an empty alt attribute.
Lighthouse reports when any
<img> elements do not have
How to fix this problem
To fix this problem,
alt attributes 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="">
Learn more in Images must have alternate text.
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.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.