# Star Ratings That Keyboard and Screen Reader Users Can Actually Use

Source: https://storefronta11y.com/blog/2026-10-30-accessible-star-ratings-keyboard-screen-reader.html

Reviewed October 30, 2026


Product star ratings often ship as clickable pictures with no accessible name. How the rating control and the displayed average each fail, and the patterns that fix them.

## Two different things called a star rating

A store has two star rating jobs and they fail differently. The first is display: showing an average like 4.6 from 212 reviews. The second is input: letting a customer submit their own rating. Display fails when the stars are pure decoration read out as five separate images, or as nothing at all, leaving a screen reader user with a product and no rating information. Input fails when the stars only respond to a mouse click or a tap.

Start by auditing both separately on one product page and one review form. Listen to the display with a screen reader: you should hear the average and the count as text, once, in words. Then try to submit a rating with the keyboard alone. Most stores discover the display half works by accident, because the theme prints the number as text somewhere, while the input half is completely mouse bound.

## The display pattern

The fix for display is restraint. Keep the star graphic, mark it as decorative with an empty alt or aria hidden, and put the real information in text next to it: the numeric average and the review count, in the reading order. A screen reader user hears 4.6 out of 5 stars, 212 reviews, which is exactly what a sighted shopper takes from the graphic in a glance. Anything fancier, like announcing each star's filled state, is noise.

Do not rely on color or fill alone for the fractional part either. A half filled star is a visual shorthand. The number is the information. Stores sometimes hide the numeric average on mobile to save space and leave only the graphic, which strips the text alternative at exactly the breakpoint where many assistive technology users shop. Check the mobile view before you call display done.

## The input pattern

For submitting a rating, the reliable pattern is a group of real radio inputs, one per star value, styled visually as stars. Radio inputs are keyboard operable by default, they announce their value and position in the group to screen readers, and they work with switch devices and voice control. Five radio buttons labelled 1 star through 5 stars inside a fieldset with a legend like Your rating is boring markup, and that is the point. It works everywhere with no script.

The common custom pattern, a row of buttons or spans with click handlers and a hover fill effect, usually fails on focus visibility, on arrow key behavior users expect from a rating group, and on the selected state being conveyed only by color. If your review app ships that pattern, you cannot restyle your way out of it. Check whether the app offers an accessible mode, and if it does not, weigh that in the renewal decision, because the review form is one of the most used forms on the store.

## Focus, hover, and the fill preview

Sighted keyboard users need two things sighted mouse users take for granted: a visible focus indicator on the star they have tabbed to, and a way to preview the fill before committing. With radio inputs, style the label of the focused and checked inputs, and test the tab order so the group is one stop, with arrow keys moving within it. That matches how radio groups behave everywhere else, so there is nothing new for the user to learn.

Finish with error handling. If a shopper submits a review without a rating, the error must be text, tied to the rating group, and announced, not just a red outline on the stars. Color only errors fail the same users the color only rating did. Run one full review submission with keyboard only and a screen reader before you sign this off, because the failure points are sequential and a single pass finds them in order.

## Related reading

If this topic is useful, these earlier guides go deeper on connected questions: [Accessible Quantity Pickers: The Small Control That Breaks Carts](https://storefronta11y.com/blog/2026-10-29-accessible-quantity-pickers-cart-inputs.md), [Sale Countdown Timers That Do Not Shut Anyone Out](https://storefronta11y.com/blog/2026-10-29-accessible-countdown-timers-sale-banners.md), and [Skip Links on Storefronts: A Small Fix With Outsized Impact](https://storefronta11y.com/blog/2026-10-28-skip-links-storefronts-accessibility.md).

## Frequently asked questions

### How should an average star rating be announced to screen readers?

As text: the numeric average and the review count, for example 4.6 out of 5 stars, 212 reviews. The star graphic itself should be marked decorative so it is not read out as five separate images.

### What is the most accessible way to build a rating input?

Use a group of real radio inputs, one per value, inside a fieldset with a clear legend, and style their labels as stars. Radio groups are keyboard operable, announce value and position, and work with voice control by default.

### Can I fix my review app's inaccessible star input with CSS?

CSS can fix focus visibility and sizing but cannot add keyboard behavior or semantics the markup lacks. If the app uses click only spans or buttons without proper roles and key handling, the fix is the app's accessible mode or a different app.

### Does a half star need special handling for accessibility?

The visual half fill needs no separate handling if the numeric average is present as text, because the number carries the information. Problems start when a theme hides the number and leaves only the graphic, especially on mobile.