Find all images without alternative text

Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.

Categories: Supported by:

Find all images without alternative text

With HTML, you can add alternative text to images using the alt attribute. It can be used to add a text description to images, which is extremely useful for accessibility as some people may not be able to see the images. With alt, screen readers can announce the alternative text to the user.

Using DevTools, you can quickly check which images on a page do not have an alt text, here is how:

Execute this in the Console panel: console.table($$('img').filter(i => !i.alt), ['src']) and that's it! You'll have the list of image URLs that don't have an alternative text.

The output of the console.table command from above shown in the Firefox DevTools console.

Here's what this command does:

In Polypane:

  1. Open the outline panel.
  2. Select Images.
  3. See which images in the list have an "Alt: missing!" warning.
  4. (Optionally) click Show overlay to highlight the missing images on the page.

The outline panel in Polypane showing a 'missing' warning for an image.

See also