DEV Community

loading...
Cover image for Star[Rating] Wars - The MadsAfif Menice [An even better star rating system and a comparison]

Star[Rating] Wars - The MadsAfif Menice [An even better star rating system and a comparison]

InHuOfficial
Specialising in accessibility and website load speed / performance. If you have a question about [accessibility] or [page-speed-insights] ask away and I will help any way I can!
・6 min read

In 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.

you are our only hope star wars gif

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.

not from a jedi meme

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.

Obi Wan "I have the High Ground" meme

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;
Enter fullscreen mode Exit fullscreen mode

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?)

yoda dressed as spock saying "with you, will the force be"

Do you like silly articles like this one?

If you are looking for someone who writes silly articles which occasionally contain useful information:

hello there obi wan meme

Perhaps give me a follow or check out one of my other silly articles such as:

or

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

Discussion (30)

Collapse
inhuofficial profile image
InHuOfficial Author

@afif and @madsstoumann I decided against an angry rant, this is far far sillier πŸ˜‹πŸ€£πŸ€£

Collapse
afif profile image
Temani Afif

Well, I came from the future. From where I came, there is no iPhone and no one know about IE, it never exists but I am discovering this in 2021. In my future there is no Safari, we only have one browser called FireChrome (yes firefox merged with google chrome). I was sent from the future to avoid that merge.
Ah and for your information, we no more talk about accessibility in the future because we have discovered a way to control everything with our mind. You close your eyes and you navigate so what I am doing is accessible in 2150 !!
You are useless in the future!

Collapse
inhuofficial profile image
InHuOfficial Author

I think I broke dev.to with this post...30 views after 4 hours? That seems little low 😬

Thread Thread
afif profile image
Temani Afif

That's what you earn when you attack the Boss! The Dev audience is under my control:

Thread Thread
inhuofficial profile image
InHuOfficial Author • Edited

is it something that the Xantorus controls? If so can you undo it, I am sat at 99k total views and although I don't normally care I would like to pass that 100k mark this week!

(p.s. you must have done 250k recently if I got my numbers right, if so congrats!)

Thread Thread
afif profile image
Temani Afif

It's under my control like the Xantorus, the Xerefus and the Xirus are!
and I will probably decrease your views until it reaches 0!

Thread Thread
link2twenty profile image
Andrew Bone

My views are also sitting quite low (compared to my other posts). I have noticed notifications not coming through properly today though so I wonder if the platform's having a couple of issues?

Thread Thread
inhuofficial profile image
InHuOfficial Author

Well I just had my comment throw an error so that may be the case that something isn't quite right.

I have had posts with 150 views total before so it isn't like I have an issue with it, just seems low given how much interest these posts have all garnered lately.

Maybe people have just had their fill of star ratings for the time being πŸ˜‹πŸ€£πŸ€£

Thread Thread
inhuofficial profile image
InHuOfficial Author • Edited

I’m an idiot - it’s 4th July celebrations today as it fell on a Sunday, was bound to be quiet! I put it down to my British ignorance! 😜🀣

Collapse
inhuofficial profile image
InHuOfficial Author

Haha brilliant, that would explain the tentacles too! I didn't think we would evolve that quickly!

Collapse
link2twenty profile image
Andrew Bone

Dammit, I just did a post about using unicode now you've done it too!

Collapse
inhuofficial profile image
InHuOfficial Author

I included your post in the article so you don't feel left out! πŸ˜‹πŸ€£

Collapse
link2twenty profile image
Andrew Bone • Edited

Phew, I can put all my insecurities away now πŸ˜…

Collapse
inhuofficial profile image
InHuOfficial Author

Ah darn it, well the lightsabres aren't unicode...but why are you joining the battle? I can't fight 3 of you πŸ˜‹πŸ€£πŸ€£

Collapse
link2twenty profile image
Andrew Bone • Edited

Was just feeling a little left out πŸ˜”πŸ˜‰

Thread Thread
inhuofficial profile image
InHuOfficial Author

We practically built the same thing so that is reassuring that I have it right this time!

You are welcome to join the fight but I think we are going to need a new component to work on soon, maybe we all have a go at the <abbr> element next? 🀣

Just reading your article now!

Collapse
siddharthshyniben profile image
Siddharth • Edited
Collapse
lapstjup profile image
Lakshya Thakur

Meanwhile me :-

baby yoda

Collapse
link2twenty profile image
Andrew Bone

I do hope you do a follow up post with an updated way of building them it'll be good to see what you've learnt 😁

Collapse
inhuofficial profile image
InHuOfficial Author

girl looking at camera as house is on fire behind her

Collapse
siddharthshyniben profile image
Siddharth

I had a feeling this would happen... I should join the fight maybe with some terminal star ratings because that's the only thing I'm good at :D

Collapse
inhuofficial profile image
InHuOfficial Author

The more the merrier! πŸ˜‹πŸ€£

Collapse
jwhenry3 profile image
Justin Henry

I like the simplicity, but the hover states aren't reflecting accurately on Chrome OSX 91.0.4472.106

Collapse
inhuofficial profile image
InHuOfficial Author

How do you mean? Not working at all or there is an issue with how they display? And is that for all of them?

Collapse
jwhenry3 profile image
Justin Henry

When I hover the stars, it does not change the style of the star I am hovering and the preceding stars.

Collapse
madsstoumann profile image
Mads Stoumann

My solution should work without JavaScript, when accent-color is supported in CSS.
/Darth Stoumann 😁

Collapse
myleftshoe profile image
myleftshoe

EPIC

Collapse
inhuofficial profile image
InHuOfficial Author

Glad you liked my silliness!

Collapse
hasnaindev profile image
Muhammad Hasnain

LOL, I just noticed the lightsabres. πŸ˜‚

Collapse
inhuofficial profile image
InHuOfficial Author

I just had to given the silliness of the article πŸ˜‹