Images with text

The Images with Text rule ensures that important information is not embedded in images unless absolutely necessary. Users cannot adjust text embedded in images to specific font sizes, font types, foreground and background colors, line spacing, or alignment. Additionally, embedded text is unreadable by screen readers and may also affect content localization. This limits accessibility for all users, including those with low vision or cognitive disabilities.

Instead, use native text components, such as TextView or UILabel, to ensure all users, including those who adjust system font size or rely on assistive technologies, can access and interact with app content effectively.

However, there are exceptions to this rule. These include images that are purely decorative or contain information that cannot be conveyed using plain text. For example, charts, graphs, logos, branding, and symbolic text characters.

Success Criteria

The specific criteria for success are:

• Images should not be used to convey textual information unless absolutely necessary. Instead, use native text components to present information in a scalable and accessible manner.
• If an image includes essential text, ensure that alternative text is provided to convey the same content accessibly.

How to fix

Avoid embedding meaningful text inside images. Instead, render text using the platform’s native text elements to support dynamic scaling, high-contrast modes, and screen readers. If an image contains essential text, provide a meaningful alternative text for the image that conveys the embedded information.

Platform-specific implementation:

• Android
  • Use TextView for textual information.
  • Use contentDescription for alternative text.
• iOS
  • Use UILabel or UITextView for textual information.
  • Use accessibilityLabel for alternative text.
• React Native
  • Use <Text> for textual information.
  • Use accessibilityLabel for alternative text.
• Flutter
  • Use Text or RichText for textual information.
  • Use Semantics and provide a label for alternative text.

Example

The following example scan report highlights a couple of images that have text embedded in them. The detectedWordCountInImage element shows how many words are detected within each image.

Fix

To fix the violation:

1. Determine whether the embedded text conveys important information.
2. If the image must be used and cannot be replaced:
   • On Android, use TextView to render visible text that supports dynamic scaling, high-contrast modes, and screen readers.
   • Use contentDescription to provide alternative text that conveys the same information to assistive technologies.

References

• WCAG 2.1 - Success Criterion 1.4.5: Images of Text (AA)
• WCAG 2.2 - Success Criterion 1.4.5: Images of Text (AA)