Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Every Image Element Has An alt Attribute

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?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.