- Success Criterion 1.4.5
- Conformance level AA
Email-Style Hero Image With All Its Copy Baked In
1.4.5 — Images of Text
Scenario
Setting
A video streaming service's show detail page
What’s wrong
Email-style hero images reused on web pages with all copy inside the image.
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 copy inside an email-style hero image reused on the web page: if it can't be selected, 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 video streaming service's show detail page, this barrier is gone for low-vision users who need scalable text — they no longer have to work around this.
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