DEV Community

Discussion on: 5 star rating system - ACTUALLY accessible, no JS, no WAI-ARIA and Semantic HTML! ⭐⭐⭐⭐⭐ [Easily converted to any framework too!]

 
grahamthedev profile image
GrahamTheDev • Edited

Yes you are correct, I had the wrong rule in mind, however the principle is the same.

If it was deemed that the stars themselves do not provide a clear enough indication of behaviour then a set of instructions which explains the usage of the control would be beneficial. These would be linked using aria, but I did indeed look at it from the wrong perspective, they need to be visible instructions.

The argument I was making (not well evidently) is that a star rating system is a widely used and understood UI pattern and the "labels" for each of the options are the stars themselves, so this is not a necessary step. However that would certainly be a great "belts and braces" accessibility improvement to add instructions for usage!

You could improve this further by adding a visible label under each star to denote the number, but then you have to consider whether that adds confusion when it shows all possible star rating numbers (as you are still relying on the stars themselves to convey the number selected), i.e. if we have 5 stars and 3 are selected, a visible label under each of the stars could cause confusion as it says "1 star, 2 star, 3 star, 4 star, 5 star".

As for taking feedback...I also said I am willing to listen and welcome any suggestions to improve it in the last paragraph, at the moment you are only giving me potential problems (which isn't useful feedback I can action as I do not agree (yet)...but I may be misunderstanding the point you are trying to make). Points that I would argue are covered. I will always improve my solution if there is a better alternative and really would like to hear what you think would make it better.

Perhaps the alternative is simply to not use a star rating system at all, but I am still quite confident in saying this is an accessible (as far as is possible with current technology) star rating widget...the argument for whether star rating widgets themselves are accessible is an interesting one though.

And the majority wording yet again I was very careful with - nothing is 100% accessible, so the 99% rule is the best we can do.

Finally I want to be clear, I am not ignoring you, neither am I not listening, I welcome feedback like this as it helps me learn and grow, I am just not understanding where you think this pattern can be improved. Please do continue to elaborate on where you think improvements can be made and I will action them once I understand the benefit / improvement!