Accessible star rating
Timed build (20 minutes). Turn the five clickable stars into an accessible rating widget.
Wrap the stars in an element with role="radiogroup". Each star is a <button> with role="radio", aria-checked (true only for the chosen star) and an aria-label containing its number (for example 4 stars).
Clicking a star sets the rating; the paragraph id="out" shows Rating: N (or Not rated before any choice).
Keyboard: only the chosen star has tabIndex={0}, all others -1 (before any choice, the first star gets 0). ArrowRight/ArrowLeft on a star change the rating by one (staying between 1 and 5) and move focus to the new star.
What Check tests
- A radiogroup contains five radio stars
- Each star has an accessible name with its number
- Clicking star 4 checks only star 4 and shows
Rating: 4 - Only the chosen star is in the Tab order
- ArrowRight moves to 5 and focuses star 5
- ArrowRight stops at 5, ArrowLeft twice goes to 3
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.