• 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="artist-quote-card.jpg" alt="Artist quote">
<!-- the jpg contains: "Music saved my life." - Jordan Reyes, styled as a social-media quote card -->

Why it matters

A fan searching for the quote text later can't find it again, since search engines and in-app search can't index words locked inside a JPG.

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

Keep the designed card background as CSS and put the quote and attribution in real HTML text.

<figure class="quote-card" style="background-image:url('quote-bg.jpg')">
  <blockquote>"Music saved my life."</blockquote>
  <figcaption>Jordan Reyes</figcaption>
</figure>

Outcome

A fan searches the app for 'saved my life' and finds the quote instead of hitting a dead end at an image file.

Who is affected

Screen reader users and anyone searching for the quote's exact wording get an unlabeled picture instead of findable text.

Learn more

Related scenarios