Alt texts

Maybe you have seen that you should always include an alt text (or alternate text) on images. But why do you actually need it? And when should you not do it?

The main reason for using alt texts is to describe what's in an image for users who can not see it. They might be blind, but they could also have blurry vision or maybe the image just didn't load because of a temporarily bad internet connection.

Examples of images where an alt text is recommended:

• A page about dog food, and the image portrays a dog.
• An image that acts as an icon button, for example a play-button to start a video. But remember not to use both aria-label and alt text with the same text. Make sure that you don&apo; repeat the same label twice, as that will just be annoying.
• An image that shows something related to the content on the page. Explain what&apo;s there as if the user is blind and asks you what&apo;s in the image.

When should you not use alternate texts?

Sometimes you should actually avoid alt texts. If the image does not contribute anything meaningful or is not related to the content at all, it will not add any value to describe it. In that case you should use an empty alt text alt="" to indicate that you intentionally leave it empty.

Some examples of images where you can use an empty alt text:

• An image that is completely unrelated to the content, for example clouds in the sky in an article about dogs.
• If the image is used to show decorative elements like borders or subtle backgrounds (still unrelated to the content).
• If there is text in the image, but you also display the same text near it. Having an alt text would just repeat the same information twice.