Browser not supported

You are using an old browser that we do not support anymore. Please consider using a modern web browser such as Microsoft Edge, Google Chrome or Firefox for the best website experience.

Avoid text on images

Screen readers cannot recognize text within images. Therefore, avoid placing text content within images to ensure that people who are visually impaired or blind do not miss out on any information.

This is particularly important when it comes to relevant information that has been created using text on image. Here it is important to create an awareness of whether the content is relevant or just graphic elements that are not relevant for understanding the content.

Let's go trough some examples

Good to go

This text and the graphic is not relevant for the following content.
This text and the graphic is not relevant for the following content.
This is working as well because the text on the image is the used headline and it is like a icon.
This is working as well because the text on the image is the used headline and it is like a icon.

Avoid this

Too much information and relevant for the content behind the teaser.
Too much information and relevant for the content behind the teaser.
Incorrect display. Cropped text and information on this picture.
Incorrect display. Cropped text and information on this picture.

ADVICE! If there is some text on images, make sure this text is added to the alt-text of the image, so that screen readers can describe the image.

This could also help you

Write Understandable Content

Write Understandable Content

This topic is not web-only but might also influence more than one area of your job. In multiple cases you might be creating textual content for the website or any other medium.

Click here to learn more about understandable content.

Meaningful Link Text

Meaningful Link Text

When designing websites, it’s essential to pay careful attention to the links and buttons you include. Ensure that your link text clearly communicates the destination or purpose of the link to the user.

Click here to learn more about meaningful link text.

Alternative Text

Alternative Text

Use alternative text (Alt Text) to provide a brief description of the image for people who are visually impaired or blind, allowing screen readers to convey the content. Alt Text is only necessary when it is contextually relevant and important.

Click here to learn how to set alternative text.

Avoid text on images

Avoid text on images

Screen readers cannot recognize text within images. Therefore, avoid placing text content within images to ensure that people who are visually impaired or blind do not miss out on any information.

Click here to learn how to avoid text on images.

Logical headline structure

Logical headline structure

Ensure that your headlines are arranged in a logical order and that they have a semantic relationship to the following text.

Click here to learn how to build a logical headline structure.