A Review or Rating component has an incorrect role or missing accessible name
| Field | Value |
|---|---|
| Rule code | Manual_Review_Ratings_Invalid |
| WCAG conformance level | A |
| WCAG success criterion | 1.1.1 Non-text Content |
| Must be fixed at source | No |
Description
We found a star rating or review widget that is missing an accessible name or uses an incorrect role. Rating & review widgets often use a container with role="text" that holds star icons. The container should instead use role="img" and an aria-label that accurately describes the rating level (i.e. "5 out of 5 Star Rating") so assistive technologies can announce the rating correctly.
How to fix
Apply role="img" to the star rating container and provide an aria-label such as "5 out of 5 Star Rating". If the rating value is available in a data attribute (e.g. data-rating="5"), derive the label from it. Preserve an existing aria-label when one is already present.