text-in-images

Ensures that important information is presented in text rather than using an image of the text.

Description

Images of text should not be used to convey important information on a webpage.

Assistive technologies like screen readers can’t detect text embedded in images. Also, users cannot adjust text in images in a particular font size, font type, foreground and background color, line spacing, or alignment. These limitations make text embedded in images inaccessible to many users.

To avoid these accessibility issues, use text instead of images of text to convey any important information.

Example

The following image contains a lot of information conveyed as an image of a text:

Screen readers or other assistive technologies can’t access the text in such images. Users cannot adjust the font, size, and other attributes of this text either. Such issues make the embedded text inaccessible to many users.

To correct this issue, you can add the information present in the image as text on the webpage. You can use any other formatting technique to achieve a similar visual effect. It is acceptable to have text in images when the visual representation of the text is essential for conveying its meaning, such as in logos.

Please note that this example is only for demonstration purposes.

How to fix?

Check if your website has any meaningful information present in images of text. If so, replace the image with text.

Reference

• WCAG 1.4.5: Images of Text
• Technique C30
• Tutorial: Images of text