Star raters are more challenging to make accessible than you might think

You see them everywhere: on e-commerce and hotel booking sites, or in your favorite music app. Star ratings seem simple—just a click, and you're done. However, designers and developers must consider significant accessibility concerns.

1. How can people with visual or motor impairments easily select stars using a keyboard?
2. How can we prevent ratings from being submitted accidentally?

Selecting stars with the keyboard

Sighted users navigate the star rater from left to right: left to select fewer stars and right to select more. In contrast, blind users who rely on screen readers find it more intuitive to navigate up (with the keyboard) for more stars and down for fewer, as they listen to a scale of values.

A good approach is to combine both methods:

• Navigate left and down to lower the number of stars.
• Navigate right and up to increase the number of stars.

Unfortunately, many existing star raters do not follow this approach, and there is no consensus:

• Some star raters respond to the ‘left arrow’ and ‘up arrow’ to decrease, such as Uber's design system and the W3C example.
• Other star raters react to the ‘down arrow’ and ‘right arrow’ to decrease, such as the Italian government's system and the European Commission's star rater.

We prefer a mixed left/down arrow approach, as blind users find it the most intuitive. The W3C provides a good example with a slider that uses this method, which can be an effective solution.

Additionally, it is crucial that each star is clearly labeled so that screen readers announce the correct order. Each adjustment must actively report how many stars are currently selected, for example:

• 1 out of 5 stars
• 2 out of 5 stars
• etc.

Preventing Accidental Submission

Many rating systems submit the rating immediately after one click. This can create challenges, especially for users who rely on screen readers or only use the keyboard.

If a star is accidentally selected, it can be difficult to go back without leaving the page. In some cases, users may only have one chance to give a rating, and they might select one star when they intended to give five. This is frustrating.

One possible solution is a hidden submit button that is only visible to keyboard users, as demonstrated in this W3C example. This allows blind users to verify their selection before submitting.

But why not make this button visible to everyone? This would also help users who work with a mouse or on a mobile device avoid mistakes, as well as those with tremors.

Finally, another WCAG criterion applies: pointer cancellation. This requires that if there is no submit button, the pointer's down event should not trigger any part of the function.

Conclusion

Effective star raters should be intuitive for those who can see them and easy to use for those who cannot see or operate them with a keyboard. By providing intuitive keyboard controls and a clear submit button, we can make them accessible to everyone. This ensures that all users can easily and reliably express their opinions.