GrahamTheDevIn a galaxy...not so far away...two Sith decided to create star rating widgets that were not fully accessible, a part of their devious plan to exclude people and exert control. InHuWan CodeObi is our only hope.
In an unusual move for the Jedi, InHuWan decided to down his lightsabre and simply produce a hastily written rebuttal piece to educate the galaxy of the evil that had transpired.
Need to catch up on the previous episodes (I would defo read the articles by Mads and Temani if you haven't already!)?
All caught up? Back to the story...
How the Sith trick you
We do not know which is the master and which is the apprentice, but we know that Darth @afif and Darth @madsstoumann have released propaganda that they have created star rating systems.
But as they use the dark side of the force there are awful problems with both of their "solutions" that continue to exclude people.
One doesn't even work on iPhone
Darth Afif designed a star rating system that doesn't work on Safari.
Darth Afif is renowned for using CSS skills that some would deem unnatural, you can learn these skills, but not from a Jedi.
Unfortunately as these skills are unnatural they do not work for a large proportion of the population and that doesn't even include the ever forgotten planet of the Internet Explorians
Neither "solutions" work on Internet Exploria - an often forgotten but important planet
As with many who use the dark side of the force they deliberately exclude those who use older technology, perhaps as they wrongly think they are an inferior race.
Not everyone has the technological know-how to upgrade their browser. Some are even forced to use Internet Explorer as it is the browser that works best with their screen reader.
In fact 12% of people who use a screen reader still rely on Internet Explorer (although that is changing very quickly, the latest results suggest it might be as low as 3.3% ๐ค๐ค). But the Sith do not concern themselves with such things.
If you happen to have clients in other Countries then you may also want to look at IE usage in those Countries before ditching it.
They do not label their work properly for fear of being discovered.
Darth Afif simply removed the labels from their work in an evil attempt to make it look like they used less HTML.
But without labels our friends over at NiViDra and JanAloWierS, two little known planets in our Galaxy cannot use this control.
As for Darth Stoumann - their deceit is a little more subtle.
They wrap their control in a <label> in order to make their HTML look neater.
They do not care that Dragon Naturally Speaking and other voice control software does not work well with implicit labels (wrapping a control in a label) and so he should use an explicit label instead (for="idofcontrol").
While one removes labels the other uses a less accessible HTML element to further confusion
This is where we start to see some really clever tricks.
Darth Stoumann decided to use an input that is weak with the force.
Radio buttons have great support (when properly labelled) but input ranges do not offer the same support.
Picking a worse element to exclude people is a typical trick of the Sith.
InHu Wan CodeObi has the solution
His previous attempts at educating the Galaxy failed as his solution required thought.
Here is a much simplified version that should bring balance to the force and give him the high ground in this conflict.
Taking a lot of inspiration from https://bjorn.wikkeling.com/199/pure-css-star-rating.html, there are just a couple of tweaks to the CSS to allow for labels and a proper use of <fieldset> and it works beautifully.
Now everyone can use this control, even those from Internet Exploria, NiViDra and JanAloWierS
To make it easier for the custodians of our galaxy (known as "developers") all you have to do with this is add inputs and labels and the CSS takes care of the rest.
Or maybe some hearts
Or you know what, how about some lightsabres?
Credit goes to https://codepen.io/ncerminara/pen/KzurJ for most of the hard work designing.
Getting the values in JavaScript
The beauty of the above controls is that to get the value is super easy in JavaScript:
var checked = document.querySelector('input[name=rating]:checked).value;
It doesn't get much simpler than that!
Enough of the silliness
In all honesty @madsstoumann created a great control.
It may be possible to make it work in IE using -ms-track, -ms-fill-lower and -ms-tooltip but I couldn't work them out using his method. And if he changed his label from an implicit one to an explicit one it is great.
I would probably use his control if you are using React (as you won't support IE anyway) despite the slightly worse support it is still usable by ~98% of people without issues (and those issues will be more of an annoyance than an actual barrier).
However for ecommerce sites and brochure sites built with HTML, CSS etc. use my version as you may as well have the extra support.
I would say give it 1 year and I will finally be able to say "screw IE" to you all. I cannot wait!
@afif example shows us what the future can hold. We might not be able to use it yet as Safari and IE hold us back, but in a few years when IE does die (because despite the fact I encourage people to support I do want it to die) and browsers all become evergreen it is an exciting prospect! Especially if there is a way to do the same trick but with a range slider.
For now (and not being biased here I promise) I would stick to radio buttons and the above examples in this post.
You might not like supporting Internet Explorer but as I have done all the work for you why not support it anyway?
It requires next to no effort from you.
And remember "live long and prosper" (oh wait...is that the wrong franchise?)
Do you like silly articles like this one?
If you are looking for someone who writes silly articles which occasionally contain useful information:
Perhaps give me a follow or check out one of my other silly articles such as:
Article No Longer Available
or
Article No Longer Available
We had a late contender in the fight!
As there are only ever two Sith, never more, never less I am guessing @link2twenty has killed either Darth Afif or Dath Stoumann.
Check out his contribution where he also uses unicode characters (but better!)
