General
- Ensure sufficient colour contrast for star icons using the correct tokens
- Use fill to indicate the state of each option
- Provide clear labels describing what is being rated
- Make the star ratings keyboard accessible
- Announce rating changes to screen readers
Web
Semantic markup
- Use appropriate input elements with proper ARIA roles
- Associate the label with the input using <label> and for/id
- Use role="radiogroup" or similar for the star container
- Each star can be a radio button or use a slider pattern
Accessible labelling
- Use <label> to describe what is being rated
- Provide aria-label or aria-labelledby on the star rating control
- Include current value in accessible text (e.g., "3 out of 5 stars")
Keyboard navigation
- Tab (⇥) — Move focus to the star rating input
- Left Arrow (←) — Decrease rating by one star
- Right Arrow (→) — Increase rating by one star
- Home (optional) — Jump to zero stars
- End (optional) — Jump to five stars
- Enter or Space — Confirm selection (if not auto-confirming)
- Tab (⇥) out — Move to next form field and confirm selection
Focus indicators
- Clear focus indicators must be visible
- The focus should clearly indicate which star or the entire rating control is focused on
Screen reader announcements
- Announce the label when the control receives focus
- Announce the current rating value as users navigate with the arrow keys
- Example announcements: "How would you rate this product? 0 out of 5 stars", "3 out of 5 stars", "Rating selected: 4 out of 5 stars"
- Use aria-live="polite" to announce changes as users adjust the rating
ARIA attributes
- Use role="radiogroup" with individual radio buttons for each star
- Use aria-label or aria-labelledby to associate the label
- Use aria-describedby for helper text or error messages
- Use aria-invalid="true" for validation errors
- Mark required fields with required and aria-required="true"
React Native
Component structure
Star ratings can be implemented using touchable components with appropriate accessibility properties.
Accessibility properties:
- Container: Provide accessibilityLabel describing what is being rated
- Current value: Use accessibilityValue to communicate min, max, and current rating
- Stars: Ensure each star or the control as a whole is accessible
- Focus: Manage focus appropriately when users interact with the rating
Touch targets:
- Ensure each star meets the minimum 44px × 44px touch target requirements
- Provide adequate spacing between stars for easy selection
Screen reader announcements:
- When focused, announce the label and current rating
- Example: "How would you rate this product? 0 out of 5 stars"
- As users change the rating, announce the new value
- Use accessibilityLiveRegion or similar for dynamic updates
Keyboard support (React Native web)
For React Native web, support keyboard navigation similar to web patterns:
- Arrow keys to adjust rating
- Tab to move between form fields
- Enter to confirm if needed