Make sure that images can have a text alternative in the code

All images must have a text alternative. A text alternative can be added in a number of ways:

Text alternative for an <img> element

A text alternative is given to an <​img> element using the alt attribute.

It looks like this in the code:

Text alternative for an <svg> element

A text alternative for an <​svg> element is provided using the title element in the <​svg>. Also add an aria attribute role=“image” to ensure that as many of the assistive technologies as possible can recognize the <​svg> element as an image.

It looks like this in the code:

Text alternative for images placed with CSS

An image placed with CSS can be given a text alternative with an aria-label.

It looks like this in the code:

Filling in the Text Alternative

The content of a text alternative is determined by the function of an image. An image often conveys information. In that case, describe in the text alternative what can be seen in the image. If an image is also a link, describe the purpose of the link in the text alternative. If an image doesn’t add any information to the page, it’s better not to give it a text alternative at all, so it can be ignored by the assistive technology.