Ensure img elements have alternate text or a role of none or presentation

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 alt attributes:

Lighthouse audit showing <img> elements do not have alt attributes
Fig. 1 — <img> elements do not have alt attributes

How to fix this problem

To fix this problem, provide alt attributes 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="">

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="..."> See also Using the aria-label attribute and Using the aria-labelledby attribute .

Tips for writing effective alt text:

  • alt text 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.

More information

Last updated: Improve article