• Success Criterion 1.1.1
  • Conformance level A

Mood-Only Hero Image Given an Overly Detailed Alt Description

1.1.1 — Non-text Content

Scenario

Setting

A pharmacy app's prescription-refill form

What’s wrong

Stock "hero" images that convey mood only but are exposed with verbose, distracting alts (should be decorative).

Example 

<img src="happy-family-hero.jpg" alt="A smiling family of four stands in a sunlit kitchen, the mother pouring orange juice while the father reads a tablet and two children laugh at the table, morning light streaming through white curtains">
<h1>Refill your prescription</h1>

Why it matters

A patient trying to quickly refill a prescription has to sit through a paragraph describing a stock photo before reaching the form they came for.

How to test

Read the alt text on hero/mood images: if it's a full paragraph describing an image meant only for atmosphere, it should instead be marked decorative (alt="").

How to fix

Give a purely mood-setting image an empty alt. An image that adds no task-relevant information doesn't need a scene description at all.

<img src="happy-family-hero.jpg" alt="">
<h1>Refill your prescription</h1>

Outcome

A patient reaches "Refill your prescription" immediately and starts the form without an unrelated detour.

Who is affected

Screen reader users trying to complete a task quickly pay for every unnecessary word with real delay.

Learn more

Related scenarios