Learn Measure Blog About

Image elements do not have [alt] attributes

Updated

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

Lighthouse flags <img> elements that don't have alt attributes:

Lighthouse audit showing <img> elements do not have alt attributes

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

Provide an 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

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

Resources

Last updated: Improve article