Images

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.

Images that convey information are necessary for the understanding of the text. These images add extra information to the page. They must have a text alternative that accurately describes what is shown in the image. The content of the text alternative depends on the context and may differ per situation for the same image.

In a CMS, a text alternative can usually be added in the media library.

It looks like this in the code:

The text alternative must be a good substitute for an image. When writing the text alternative, always think about the purpose of the image. Keep a text alternative useful and concise.

Sometimes it is not possible to fully describe an image in a short text alternative. For example, when it comes to an extensive infographic or a graph. These types of complex images should also be fully described in a text alternative. In that case, in addition to a concise description in the alt attribute, also provide a longer description in the surrounding text.

A longer description may also be placed on a separate page. In that case, place a link with the reference to that other page immediately before or after the image.

The surrounding text should also be linked to the image. This is not mandatory, but very useful. It can be done with the aria-describedby attribute. Use the ID of the element where the complex image is described. This information should also be visible to the visitors who are able see.

There are cases when instead of text only an image is used as a link. These images are called functional images. These can be images that refer to another page or website, but also images that perform an action on the page.

These images must have a text alternative that describes the purpose of the link, or describes what happens when the image is clicked. Reading software uses the text alternative as link text. That is why it is more important to describe the purpose of the link, rather than what is in the image.

If there is also text on a functional image, then both the text on the image and the purpose of the link must be included in the text alternative. As a result, visitors who work with speech recognition can also easily reach the link.

Images placed on the page for purely decorative purposes should not have a text alternative. For example, these are images that do not convey information and are not necessary for the understanding of the text. These images should be ignored by assistive technologies. Decorative graphics are best placed using CSS.

If it is not possible to place a decorative image with CSS, then the alt attribute in the <​img> element should be left empty. The alt attribute must be present, but without any text.

Do not use images of text to convey information. Images of text are not suitable for all the visitors. Often the font size in an image does not scale well. The visitors cannot also adjust the embedded text to their own style preferences.

Use ‘real’ text. Text that actually appears as text on the page can be styled with CSS. For example, this can be used to adjust the colour, font, font size, line height and letter spacing. It is also possible to place text on an image with CSS.

Make sure that any moving, scrolling, or flashing content that starts automatically and lasts longer than 5 seconds can be paused, stopped, or turned off. This includes carousels, on-page animations, moving ads, etc. It may distract visitors with cognitive impairments. This can also be distracting for visitors who use a screen reader.

These rules also apply to all auto-refreshing content, where it is also crucial that the frequency of the updates can be adjusted.

Do not use flashing content and do not allow for it to flash more than 3 times per second. Visitors with certain forms of epilepsy may experience a seizure when viewing flashing images or media.