Rating
How the Rating works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.
Rating comes in two kinds. Read-only, the Rating & Review summary is a role="img" labelled "Rated 4.5 out of 5", and each distribution row is a role="meter". Interactive, Rating Cells and the Rating Bar are radio groups with one tab stop: arrow keys move the choice, and each radio is named "3 stars" or "3 of 5".
Keyboard#
Moves into the group, onto the chosen radio (or the first), then out of it in one step.
Chooses the next score and moves focus to it.
Chooses the previous score and moves focus to it.
Chooses the lowest score.
Chooses the highest score.
Chooses the focused score.
Semantics#
role="radiogroup" aria-labelNamed from ariaLabel, such as "Rate this template".
Rating Cells, Rating Barrole="radio" aria-checkedNamed "1 star" to "5 stars" (or hearts), or "1 of 5" on the Rating Bar. Emoji are decorative (alt="").
Each cell or steparia-readonly, aria-disabledOn the group. Disabled cells leave the tab order.
readOnly, disabledrole="img" aria-label"Rated 4.5 out of 5". Everything inside is presentational, including the count and the reviews link.
Rating & Reviewrole="meter"The track carries aria-valuenow and is named by its label, such as "5 Stars".
Distribution rowColour contrast#
Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.
Marks · Rest, Hover, Selected
Stars and hearts are graphics: 3:1 against the cell. Empty marks (#f2f2f2) and hover previews (#cbcbcb) fall well short, so the chosen score must also be readable another way.
WCAG 1.4.11 Non-text Contrast ↗WCAG 1.4.1 Use of Color ↗Numbers and text · Rating Bar, summary
Number steps, the average, the count and the reviews link are text at 14px.
WCAG 1.4.3 Contrast (Minimum) ↗Distribution fill · Rating Progress
The yellow fill (#fdda2a) against its 8% track measures 1.16:1. The count or percentage beside it carries the value.
WCAG 1.4.11 Non-text Contrast ↗Focus indicator · Focus visible
#1a6ef8 (4.54:1 on white): a 2px ring with a white gap around Rating Cells, inset on Rating Bar steps and the reviews link.
WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗Name and state · Interactive
Each radio says its score and whether it is chosen, so the value never depends on counting filled stars.
WCAG 4.1.2 Name, Role, Value ↗Measured contrast#
Marks and text against the cell they sit on, at rest, on hover and chosen, from the rating tokens. Marks are graphics and are held to 3:1; numbers and text are held to 4.5:1. The summary has no hover or chosen state, so it repeats its rest figure. 9 of 18 pairs fall below their minimum (4.5:1 for text, 3:1 for graphics) and are marked in amber.
Motion#
- Cell washes, mark fills and Rating Bar fades take 150ms and are turned off under prefers-reduced-motion.
Checklist#
The reviews link sits inside the summary's role="img", so it is focusable but has no name for screen readers. Move it outside the image.
The summary's "5.2K Ratings" is hidden by the same role="img". Put the count in the label ("Rated 4.5 out of 5, from 5,200 ratings") or outside the image.
Empty marks are about 1.1:1 and hover previews about 1.6:1. Show the chosen score in text as well ("3 of 5").
Stars (#ff9000) measure about 2.3:1 on white, under 3:1. Hearts pass at about 4.5:1.
Rating Bar numbers at rest are #8f8f8f, about 3.2:1. Darken them.
Arrow keys choose as they move, like native radios. If a choice sends something, add a separate submit.