• 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="new-season-hero.jpg" alt="New Season">
<!-- the image contains the full synopsis paragraph and a "Watch Now" call to action -->

Why it matters

A viewer who increases page zoom to read the synopsis gets a pixelated paragraph instead of legible text, since the hero was designed for email, not a responsive page.

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

Rebuild email hero designs for web with real headings and paragraphs, not one flat reused image.

<div class="hero" style="background-image: url('season-art.jpg')">
  <h2>New Season</h2>
  <p>Detective Reyes returns for a final case that hits closer to home than ever.</p>
  <a href="/watch" class="btn">Watch Now</a>
</div>

Outcome

A viewer's screen reader announces the full season synopsis instead of skipping past one unlabeled image.

Who is affected

Low-vision viewers relying on zoom and screen reader users needing the synopsis read aloud both lose access to the description.

Learn more

Related scenarios