A rating must expose its value as text

Rule rating-widget-name · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A rating drawn as five star icons conveys its value entirely through pictures. With no text alternative a screen-reader user reaches a product and learns nothing about how it was rated — and on a listing page, nothing that would let them compare one product with another.

How to fix#

Give the rating container an accessible name that states the value ("Rated 4 out of 5"), or add visually-hidden text. If the same score already appears as adjacent text, mark the stars aria-hidden="true".

Example#

<div class="rating"><i class="star"></i><i class="star"></i></div>

<div class="rating" role="img" aria-label="Rated 2 out of 5">…</div>

WCAG success criteria#

1.1.1 Non-text Content — Level A#

All non-text content (images, icons, controls) needs a text alternative that conveys the same purpose, or be marked decorative so assistive tech can ignore it.

Understanding 1.1.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WCAG — Non-text Content