Star rating system - only 168 BYTES 😲, no JS, no CSS, no images 😨, Accessible (kind of)...the war is over
Tags: a11y, html, webdev, showdev
Published: 2021-07-08 21:32:45

What started as an innocent post on [creating an accessible star rating system](https://dev.to/inhuofficial/5-star-rating-system-actually-accessible-no-js-no-wai-aria-3idl) 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](https://dev.to/madsstoumann/mood-selector-jhi) or [anything even resembling a star](https://dev.to/link2twenty/unicode-mood-selector-star-rating-system-8g), people are making [inaccessible rating systems](https://dev.to/lapstjup/implementing-a-star-rating-component-in-vanilla-js-20ob) (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](https://dev.to/afif/scalable-star-rating-without-js-and-no-svg-or-image-for-the-star-2mef).

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

![unlimited power meme - emperor Palpatine star wars](https://media.giphy.com/media/hokMyu1PAKfJK/giphy.gif)


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
{% jsfiddle https://jsfiddle.net/v9zsnbrt/ result html %}

---

**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:
{% post https://dev.to/inhuofficial/5-star-rating-system-actually-accessible-no-js-no-wai-aria-3idl %}

lapstjup came up with an interesting JS powered version, just has a few accessibility issues but overall a great contribution!
{% post https://dev.to/lapstjup/implementing-a-star-rating-component-in-vanilla-js-20ob %}

@madsstoumann fired back and I have to say I absolutely love this idea and I am stealing it, if you read any read this one as it is accessible and works in everything other than IE!

{% post https://dev.to/madsstoumann/star-rating-using-a-single-input-i0l %}

@afif showing off his CSS skills as always!
{% post https://dev.to/afif/scalable-star-rating-without-js-and-no-svg-or-image-for-the-star-2mef %}

@link2twenty just got this one out before my rebuttal piece (and is better than mine)
{% post https://dev.to/link2twenty/star-rating-using-unicode-stars-3np2 %}

--- 

### 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!
{% post https://dev.to/inhuofficial/star-rating-wars-the-madsafif-menice-an-even-better-star-rating-system-and-a-comparison-3pg5 %}


@siddharthshyniben came up with a version for the terminal
{% post https://dev.to/siddharthshyniben/star-rating-in-the-terminal-12np %}

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!
{% post https://dev.to/afif/the-one-star-rating-system-the-future-of-rating-4jl8 %}

A better terminal version, taking the concept of the previous post but with ASCII text!
{% post https://dev.to/siddharthshyniben/the-superflexible-star-rating-system-the-future-of-star-rating-in-the-terminal-33j5 %}

Simple but effective, accessible too!
{% post https://dev.to/link2twenty/star-rating-with-simple-animations-the-saga-continues-5cgj %}

This is where "star rating" started being stretched
{% post https://dev.to/madsstoumann/mood-selector-jhi %}

Yet again, not even using stars anymore!
{% post https://dev.to/link2twenty/unicode-mood-selector-star-rating-system-8g %}

@lionelrowe decided to spice things up with a rating that introduces negative ratings like rotten tomatoes! But doesn't use stars once again!
{% post https://dev.to/lionelrowe/rotten-tomatoes-star-rating-system-with-webcomponents-5a04 %}

@adam_cyclones decided to put a very silly one in from their phone! Sorry Adam I only give you one star for this!
{% post https://dev.to/adam_cyclones/star-rating-with-nothing-but-text-ef4 %}

**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!**