• 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