Skip to main content
No Result Found
Connect & Get help from fellow developers on our Discord community. Ask the CommunityAsk the Community

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.

  • Rule Category : Accessible Images
  • WCAG 2.1 SC : 1.4.5 (AA)
  • WCAG 2.2 SC : 1.4.5 (AA)
  • Rule Severity : Serious
  • Supported Platforms : Android, iOS

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.

The App Accessibility issue details window displaying two "Images with text" violations.

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.

Brand logos that contain stylized text, such as “Google” or “Instagram”, are considered essential and are permitted under WCAG 1.4.5. These do not need to be replaced with native text but should still include alternative text describing the logo.

References

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle