Star Rating

An accessible star rating control with interactive and read-only variants, communicating both the selected value and the available range to screen readers through a radio-group pattern or equivalent text alternative.

Demo

The demo below includes both a read-only rating display and an interactive rating input. For the read-only variant, use a screen reader and navigate to it to hear how the score and total are announced without any visual dependency. For the interactive variant, Tab to it and use arrow keys to move through star options, then press Space or Enter to select a rating.

What to Observe

• The read-only rating communicates its value as text (e.g., "4.2 out of 5 stars") rather than relying on five partially filled star icons alone.
• The interactive rating uses a radio-group pattern, giving each star a label that describes the rating it represents (e.g., "3 stars").
• Arrow key navigation moves between star options in the interactive variant, matching the expected behavior for a group of radio buttons.
• The currently selected star is identified both visually and programmatically so screen reader users can confirm which rating they have chosen.
• The label "out of 5" or equivalent is available to provide the scale context, not just the selected value.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Rating group label: A visible or accessible label that introduces the rating control (e.g., "Rate this product") and scopes its purpose.
2. Star options (interactive): Individual radio inputs or equivalent controls, each labeled with the rating value it represents (e.g., "1 star", "2 stars").
3. Selected state indicator: The visual and programmatic marker that identifies the currently chosen rating within the interactive variant.
4. Read-only display: A text-based or ARIA-labeled element that communicates a pre-existing average rating score and total for display-only contexts.
5. Review count (optional): A numeric or textual indication of how many reviews contributed to the displayed average rating.

Accessibility Behavior

• The read-only rating provides a text alternative such as "Rated 4 out of 5 stars" that is accessible to screen readers regardless of whether the star icons are visible.
• The interactive variant uses a radio-group pattern with a group label and individual radio inputs, so each star has a named, focusable, selectable role.
• Arrow key navigation within the interactive variant moves focus between stars without requiring Tab for each option, consistent with radio group keyboard behavior.
• The selected star is programmatically marked as the chosen value so that when a user navigates away and returns, the correct star is reported as selected.
• Neither the read-only nor the interactive variant relies on star color alone to convey its meaning — the selected value is always available as text.
• The total scale (e.g., "out of 5") is always communicated so users understand the selected value relative to the maximum possible rating.

Common Mistakes

• Rendering a row of star SVG icons with no text equivalent, leaving screen reader users with five unlabeled graphics and no rating value.
• Implementing the interactive variant with individual buttons or div elements instead of a radio group, breaking expected keyboard navigation and selection behavior.
• Omitting the "out of 5" scale context so screen reader users hear a number like "4" without knowing the maximum possible rating.
• Using yellow fill color as the only indicator of the selected star, which is invisible to users in high-contrast mode or with certain color-vision differences.
• Requiring mouse hover to display the rating labels for each star option, making the control unusable for keyboard-only users exploring the choices before selecting.

Why This Matters

Star ratings appear on nearly every product page and review section, and they heavily influence purchase decisions. A screen reader user who encounters five unlabeled star graphics receives no useful product feedback at all. For interactive rating inputs — used on order confirmation pages, review forms, and feedback surveys — an inaccessible control means the user cannot complete a task that is available to everyone else. Whether read-only or interactive, accessible star ratings ensure that every user can access product reputation data and submit their own feedback equally.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code