Star Rating Accessibility
Best Practices
Star Rating container must use role="img" and aria-label to convey the rating value (e.g., "Rating: 2.5 out of 5").
Individual star icons must use aria-hidden="true" since the accessible name is provided by the container.
Interaction Design
Keyboard
Star rating is not interactive and should not be keyboard focusable.
Screen Reader
A screen reader must announce the aria-label value and image role (e.g., "Rating: 2.5 out of 5, image").
Pointer
Star rating is not clickable.
ARIA Reference
| Attribute | Description |
|---|---|
| role="img" | Applied to the star rating container to identify it as an image to assistive technologies. |
| aria-label | Applied to the container to provide the rating value (e.g., "Rating: 2.5 out of 5"). |
| aria-hidden="true" | Applied to individual star icons to hide them from assistive technologies. |