• Success Criterion 1.1.1
  • Conformance level A

Star Rating Shown Only as Images, Never as Text

1.1.1 — Non-text Content

Scenario

Setting

A community forum's discussion thread

What’s wrong

Rating widgets shown as star images with no text equivalent ("3 of 5 stars").

Example 

<span class="stars"><img src="star-full.png"><img src="star-full.png"><img src="star-full.png"><img src="star-empty.png"><img src="star-empty.png"></span>

Why it matters

A forum member checking a thread's helpfulness rating hears five unlabeled images in a row, or nothing at all, with no way to gauge the reaction.

How to test

Check the accessible name of a star-rating widget: it should read as text like '3 of 5 stars', not just visually filled/empty star icons.

How to fix

Wrap the whole rating in one element with a single stated value.

<span class="stars" role="img" aria-label="3 out of 5 stars">
  <img src="star-full.png" alt="" aria-hidden="true">
  <!-- remaining stars marked the same way -->
</span>

Outcome

A member hears "3 out of 5 stars" as one clear statement and quickly judges whether the thread is worth reading.

Who is affected

Screen reader users trying to gauge community reactions expressed only through star icons get no usable signal.

Learn more

Related scenarios