Jump to main content

The alt attribute

The alt attribute for images is used to descibe the image. It could be for a user who is visually impaired or if the image fails to load. The alt text should not be a complementary to the image itself, instead it should be an alternative for the image. Think of it like a text that could be used instead of the image.

One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text. -- WHATWG

But. If the image is considered to be only used as a decoration, and doesn't have any meaning to the content, then the alt-text can be left empty. You should still add the alt attribute, but set it as an empty string. E.g.

<img src="decorator.jpg" alt="" />
<img src="cat.jpg" alt="The cat is black with thick furr and has yellow/green eyes" />

I have created a simple css-selector that can be used to highlight which images are missing the alt attribute and which has an empty alt text. Feel free to use it if.

https://codepen.io/overtune/pen/dybgLNK

Read more / sources: