Live demo: Open the rating BEFORE/AFTER micro-demo
Common failure modes
- Mouse-only stars: clickable icons that aren’t reachable by keyboard (no focusable element).
- No group label: someone hears “1 star… 2 stars…” but not what they’re rating.
- Unannounced value: the UI changes visually, but assistive tech doesn’t get “selected 4 out of 5”.
- Non-standard keyboard: arrow keys don’t work, or focus jumps unexpectedly.
Small, reliable pattern (recommended)
- Use a native
<input type="radio">group. - Wrap it in
<fieldset>+<legend>so the control has a clear, announced group label. - Each choice should have a text alternative (example: “1 star”, “2 stars”…). (You can keep the visible UI as stars.)
- Let the browser provide predictable keyboard behavior (Arrow keys to move, Space to select).
- Optionally show a visible “Selected: 4/5” summary near the control.
If you must build a custom widget
- Replicate radio-group semantics: one selected item at a time, announced state, consistent keys.
- Provide a group label (programmatic), and keep focus behavior simple.
- Test with keyboard only (Tab + Arrow keys), and at least one screen reader.
Related micro-demos
- Toggle button (exposing state)
- Form hints (help text via
aria-describedby)
More from this hub
- Watch page (primary share target)
- Micro-demo backlog