• Success Criterion 1.4.5
  • Conformance level AA

Screenshot of Text Used as the Page’s Primary Content

1.4.5 — Images of Text

Scenario

Setting

A grocery delivery app's shopping cart

What’s wrong

Screenshots of text used as the primary content (release notes, quotes, error messages) — not the "essential" exception.

Example 

<img src="promo-code-error.png" alt="Promo code error">
<!-- screenshot reads: "This code expired on Sept 1. Try FRESH10 instead." -->

Why it matters

A shopper trying to fix a rejected promo code can't copy the suggested replacement code out of a screenshot to paste into the field.

How to test

Try to select the content of a 'screenshot' (release notes, quotes, error messages): if it's used as the primary content instead of real text, it fails.

How to fix

Error messages are exactly the kind of content the "essential" exception does not cover; render them as live text.

<p class="error" role="alert">This code expired on Sept 1. Try FRESH10 instead.</p>

Outcome

A shopper copies the suggested code straight from the message and finishes checkout without retyping it by ear.

Who is affected

Screen reader users and anyone who copies text to reuse it get a picture instead of a message they can act on.

Learn more

Related scenarios