Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Every Image Element Has An alt Attribute

Why the audit is important

Informative images should have an alt attribute that includes a text description of the contents of that image. Screen readers enable visually-impaired users to use your site by converting text content to forms they can use, such as synthesized speech or Braille. Screen readers can't convert images. So if your images include important information, that information is not accessible to visually-impaired users.

See Text Alternatives for Images for more information.

How to pass the audit

Below the audit, Lighthouse displays something like 1 element fails this test. The number varies depending on how many elements are failing. Click this label to expand the list. You can find each element in your DOM by running the $(), $$(), and $x() functions from the Chrome DevTools Console.

Add an alt attribute to img elements. The value of the alt attribute should be text describing the content of the image. If an image is not informative, if it's purely a decorative element, you can tell a screen reader to ignore it using an empty alt="" attribute. You can run the following command in the DevTools Console to find the elements:

$$('img:not([alt])');

DevTools returns an array. Expand the array and then hover over each img to highlight it in the viewport.

When writing a description for each image, keep in mind that this is all the information that visually-impaired users have to go by, so try to make it as useful as possible for them. You don't need to explain every detail of the image, instead consider the context in which the image is being used, and try to convey the gist of the scene as efficiently as possible.

How the audit is implemented

This section explains how this audit is implemented, so that you can understand how the audit's score is calculated.

This audit is powered by the aXe Accessibility Engine. See Images must have alternate text for more information.

Feedback