• Success Criterion 4.1.2
  • Conformance level A

Rating Widget With No Name or Value Semantics at All

4.1.2 — Name, Role, Value

Scenario

Setting

A professional networking site's profile editor

What’s wrong

Rating widgets with no name/value semantics.

Example 

<div class="star-rating">
  <span class="star filled" onclick="setRating(1)"></span>
  <span class="star filled" onclick="setRating(2)"></span>
  <span class="star filled" onclick="setRating(3)"></span>
  <span class="star" onclick="setRating(4)"></span>
  <span class="star" onclick="setRating(5)"></span>
</div>
<!-- five identical spans with a "filled" class toggling; no role, no name,
     and no current value exposed anywhere -->

Why it matters

A screen reader user endorsing a colleague's skill cannot tell how many stars are selected or set a rating at all.

How to test

Inspect a rating widget in DevTools: check for a name and value semantics (e.g., radiogroup pattern) — visual-only stars with no semantics fail.

How to fix

Model a star rating as a radio group, one radio per star value, with only one aria-checked="true" at a time.

<div class="star-rating" role="radiogroup" aria-label="Rate your endorsement confidence">
  <div role="radio" aria-checked="true" tabindex="0" onclick="setRating(1)">1 star</div>
  <div role="radio" aria-checked="false" tabindex="-1" onclick="setRating(2)">2 stars</div>
</div>
<!-- continues through 5 stars, each with its own aria-checked -->

Outcome

A colleague sets a 3-star endorsement and hears the exact rating confirmed back.

Who is affected

Screen reader users endorsing connections cannot perceive or set the star rating for a skill.

Learn more

Related scenarios