• Success Criterion 1.3.1
  • Conformance level A

Star Rating or Progress Step Shown Only as a Visual Cue

1.3.1 — Info and Relationships

Scenario

Setting

A pharmacy app's prescription-refill form

What’s wrong

Star ratings, progress steps, and status badges whose meaning exists only in visual position/color.

Example 

<div class="refill-steps">
  <span class="dot done"></span>
  <span class="dot active"></span>
  <span class="dot"></span>
</div>

Why it matters

A screen reader user hears three unlabeled spans, with no way to learn the refill stages. They can't tell Requested from Verifying or Ready.

How to test

Focus a star rating, step indicator, or status badge with a screen reader: it should announce a text equivalent ('3 of 5 stars', 'Step 2 of 4') — visual-only fails.

How to fix

Every status conveyed by color or icon alone needs a text equivalent read aloud in its place.

<ol class="refill-steps">
  <li aria-current="false">Requested <span class="visually-hidden">(complete)</span></li>
  <li aria-current="step">Verifying</li>
  <li aria-current="false">Ready</li>
</ol>

Outcome

A patient hears their refill is at the Verifying stage instead of guessing from a colored dot.

Who is affected

Screen reader users tracking a prescription refill get zero information about status from a row of colored dots.

Learn more

Related scenarios