Star rating system - only 168 BYTES 😲, no JS, no CSS, no images 😨, Accessible (kind of)...the war is over

What started as an innocent post on creating an accessible star rating system that was useful and pointed out the problems with most solutions has descended into madness. In this post I end the star (rating) wars!

People have started creating star rating systems that don't use stars or anything even resembling a star, people are making inaccessible rating systems (the very thing I was rallying against - and @lapstjup is certainly not alone!), some are even making star rating systems that don't work on 20%+ of browsers.

Well you know what, lets end this right now as I have:

Here it is, a star rating system that:

  • uses something resembling a fucking star (the number 1 prerequisite for a star rating system!)
  • works all the way back to IE9 and beyond! ✅
  • is tiny at 168 bytes all in! (and that includes the label which could probably be shorter!) ✅
  • has validation built in ✅
  • is easy to use ✅
  • requires no JS ✅
  • requires no CSS ✅
  • is accessible (kind of, the control type is confusing, although if this wasn't silly you could use the pattern attribute to fix this! Also as I stated in my other posts you should use explicit labels rather than implicit ones (for="id" style labels)) ✅
  • even includes submission to your server (if you set the action - might double the size of the control though!) ✅

I present to you the winner of the star (rating) wars

So there you go, it is all over, go home you all lost.

(and yes, I am of course joking!)

In case you wanted to catch up properly

This saga has been insanely funny, here are all the posts I can remember as part of this so far (I am sooo sorry I started this! 😋😉):

An actually useful post:

lapstjup came up with an interesting JS powered version, just has a few accessibility issues but overall a great contribution!

Where it all started to become very silly!

Me again includes my lightsabre star rating system at the bottom - this is where it all started to go wrong!

A great take on star rating systems that shows us what we will be able to do in the future with CSS once the browser vendors catch up! Very educational and a clever concept too!

A better terminal version, taking the concept of the previous post but with ASCII text!

Simple but effective, accessible too!

This is where "star rating" started being stretched

Yet again, not even using stars anymore!

All caught up now with this post being the latest!

You silly billy

Yes I know! Sorry for polluting the feed with this crap.

I am hoping everyone just gives up now because you know what, star rating systems are actually pretty rubbish as they don't give an accurate picture!

29