Overview
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.
Recommendations
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.
More information
This audit is powered by the aXe Accessibility Engine. See Images must have alternate text for more information.
Feedback
Was this page helpful?