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.
- Use
-
iOS
- Use
UILabel
orUITextView
for textual information. - Use
accessibilityLabel
for alternative text.
- Use
-
React Native
- Use
<Text>
for textual information. - Use
accessibilityLabel
for alternative text.
- Use
-
Flutter
- Use
Text
orRichText
for textual information. - Use
Semantics
and provide alabel
for alternative text.
- Use
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:
- Determine whether the embedded text conveys important information.
- 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.
- On Android, use
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
- WCAG 2.1 - Success Criterion 1.4.5: Images of Text (AA)
- WCAG 2.2 - Success Criterion 1.4.5: Images of Text (AA)
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
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!