images-of-text

Description

Text embedded in images should not be used to convey important information on a webpage. Instead, use actual text to present the information.

Assistive technologies, such as screen readers, can’t detect text embedded in images. Additionally, users cannot adjust the text in images to specific font sizes, font types, foreground and background colors, line spacing, or alignment. These limitations make text embedded in images inaccessible to many users. On the other hand, using real text ensures that assistive technologies can detect and present the information to the users.

However, there are exceptions to this rule, such as screenshots, graphs, charts, or other images that convey important information visually, not just through text.

Examples

In the following example, the procedure to change the username is embedded in an image. As a result, users who rely on assistive technologies are unable to access this information.

The following HTML code provides the same procedure as HTML text. This allows assistive technologies to successfully access the information.

How to fix?

To fix this issue:

• Present information as text rather than embedding it in an image.
• Use HTML text and style it with CSS to modify the appearance. Use background images with decorative elements to highlight the text.

References

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