Accessible star rating system with no JS

Written by Elijah on Wednesday, October 26 2016; last edited 3 years ago

A stab at a keyboard and screen reader accessible "star rating" widget using only HTML and CSS. Check out the demo here.

This all started when Google referred me to an old CSS-Tricks article, "Star Ratings With Very Little CSS." I thought the concept was cool - a star rating form widget, like you'd use when reviewing a product on a shopping website - with no JS and very light CSS. I didn't expect that the widget would be fully accessible, but I'd hoped there would be at least some nod to accessibility.

Tagged with: screen reader, keyboard, widget, demo