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.
Here's what this command does:
$$()find all elements that match a given CSS selector (learn more here). Here it is used to find all images.
filter()is used to only keep the images that do not have an
console.table()takes the array returned by
filterand outputs a pretty table in the console based on it. Notice the second (optional) paramter that is used here to retrict the number of columns to just the
srcattribute from each image.