- Success Criterion 1.4.5
- Conformance level AA
Quote Card Image Used as the Only Version of a Quote
1.4.5 — Images of Text
Scenario
Setting
A streaming music app's search results
What’s wrong
Social-media quote cards embedded as sole representation of the quote.
Example
<img src="sale-banner.png" alt="50% off everything">Why it matters
Low-vision users who need scalable text, and people who customize fonts or colors.
How to test
Try to select the quote text inside a social-media-style quote card: if it's an image with no text alternative equivalent, 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).
<div class="banner"><p>50% off everything</p></div>Real text can be resized, recolored, and read aloud accurately — an image of text can't.
Outcome
On a streaming music app's search results, this barrier is gone for low-vision users who need scalable text — they can complete the task without hitting this wall.
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
- Text-Heavy Content Rendered as an Image Instead of Real Text
- 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