Star Rating Select Accessibility
Best Practices
Star Rating Select container must use role="radiogroup" with aria-label to describe the purpose (e.g., "Rate this product").
Each radio input must have an aria-label describing its value (e.g., "1 Star", "2 Stars").
Star icons must use aria-hidden="true" since accessible names are provided by the radio inputs.
For non-interactive star ratings, use the Star Rating pattern.
Interaction Design
Keyboard
Pressing TAB key must move focus to the radio group. If a rating is already selected, focus lands on the selected radio.
If the radio group is focused, pressing LEFT/UP arrow keys must select the previous rating. RIGHT/DOWN arrow keys must select the next rating.
Screen Reader
A screen reader must announce the radiogroup label, current radio label, and selection state.
Pointer
Clicking or tapping a star must select that rating value.
ARIA Reference
| Attribute | Description |
|---|---|
| role="radiogroup" | Applied to the container to group the radio buttons. |
| aria-label (on container) | Describes the purpose of the rating selection (e.g., "Rate this product"). |
| aria-label (on radio) | Describes the rating value for each option (e.g., "1 Star", "2 Stars"). |
| aria-hidden="true" | Applied to star icons to hide them from assistive technologies. |