- Success Criterion 1.4.5
- Conformance level AA
Text-Heavy Content Rendered as an Image Instead of Real Text
1.4.5 — Images of Text
Scenario
Setting
A music streaming app's playlist screen
What’s wrong
No numbered W3C failure technique exists for this rule — it fails simply when the required feature/behavior is missing or inadequate (see the scenarios below).
Example
A QA pass on a music streaming app's playlist screen turns this up: no numbered W3C failure technique exists for this rule — it fails simply when the required feature/behavior is missing or inadequate (see the scenarios below).
Why it matters
Low-vision users who need scalable text, and people who customize fonts or colors. On a music streaming app's playlist screen specifically, they can't perceive the control's boundary or state.
How to test
Try to select suspect heading/paragraph text with a cursor drag: if it can't be highlighted (because it's an image), and it's not a logo or essential presentation, it fails.
How to fix
Real text must be used instead of an image of text (except logos or where the exact rendering is essential).
Outcome
Fixed, a visitor to a music streaming app's playlist screen can see the control's boundary and current state.
Who is affected
Low-vision users who need scalable text, and people who customize fonts or colors.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Page Heading or Banner Exported as an Image File
- Button or Navigation Label Rendered as an Image
- Marketing Text Baked Directly Into a Composite Image
- Restaurant Menu or Price List Uploaded as a Photo
- Screenshot of Text Used as the Page’s Primary Content
- Email-Style Hero Image With All Its Copy Baked In