Image elements do not have [alt] attributes

Image elements do not have [alt] attributes

Updated
Appears in: Accessibility audits

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