I support the idea of the need for an accessible rating system, but I don't believe this is a final product. It's not "accessible" if it fails other user groups and it's worth running through the criteria on WCAG 2.1. For instance, the chosen ratings are only distinguishable through color (1.4.1) and there are no visible labels (3.3.2.)
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I think it works and would pass WCAG AAA, but I am always open to a discussion on stuff!
I think you may have misunderstood "distinguishable by colour", an empty star with an outline vs a filled star with no outline vs a filled star with an outline is visually different even with Achromatopsia (complete colour blindness). It could be black and white and still perfectly obvious which stars are filled and which are empty due to side differences and fill differences. Where it would fail is if I used a red star initially and then turned them green when selected, then there is no visual difference, only a colour difference.
Also the stars have a visible label in that they are in a fieldset with a legend, which labels the controls purpose, and for knowing what is selected: visually the number of ratings is easily determined by the number of filled stars.
However you could address both quite easily by updating the legend with the current rating in brackets (Your rating (current: 0 out of 10): ) and provide additional instructions via aria-labelledby or aria-describedby if you believe that a star rating pattern is not a recognised and understood pattern in your Country or within a community (as that would be the biggest problem, unfamiliarity with a star rating system would make this hard to understand).
I would say this passes the 99% rule - 99% of people will both understand and be able to use the control as nothing is "perfect" when it comes to accessibility (for example this may not be the best design for eye-gaze technology if the stars are smaller).
I would pass it on a VPAT, but as always I am more than willing to make improvements if you have any suggestions, as I love when people blow my mind with something I hadn't considered or a novel idea! 💪❤
Good point on the border for 1.4.1, I hadn't noticed the subtle border change between chosen and other star shapes.
You are mistaken on 3.3.2 Labels or instructions when you mention programmatic structure, accessible names, or accessible descriptions. This criterion is not intended for screen readers.
Look man, I'm on your side, but it peeves me that you mentioned it is accessible and do not take feedback.
Edit: I would caution you about using the words that it works for the majority of users, as people with disabilities will always be a minority group.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
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!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I support the idea of the need for an accessible rating system, but I don't believe this is a final product. It's not "accessible" if it fails other user groups and it's worth running through the criteria on WCAG 2.1. For instance, the chosen ratings are only distinguishable through color (1.4.1) and there are no visible labels (3.3.2.)
I think it works and would pass WCAG AAA, but I am always open to a discussion on stuff!
I think you may have misunderstood "distinguishable by colour", an empty star with an outline vs a filled star with no outline vs a filled star with an outline is visually different even with Achromatopsia (complete colour blindness). It could be black and white and still perfectly obvious which stars are filled and which are empty due to side differences and fill differences. Where it would fail is if I used a red star initially and then turned them green when selected, then there is no visual difference, only a colour difference.
Also the stars have a visible label in that they are in a fieldset with a legend, which labels the controls purpose, and for knowing what is selected: visually the number of ratings is easily determined by the number of filled stars.
However you could address both quite easily by updating the legend with the current rating in brackets (Your rating (current: 0 out of 10): ) and provide additional instructions via
aria-labelledbyoraria-describedbyif you believe that a star rating pattern is not a recognised and understood pattern in your Country or within a community (as that would be the biggest problem, unfamiliarity with a star rating system would make this hard to understand).I would say this passes the 99% rule - 99% of people will both understand and be able to use the control as nothing is "perfect" when it comes to accessibility (for example this may not be the best design for eye-gaze technology if the stars are smaller).
I would pass it on a VPAT, but as always I am more than willing to make improvements if you have any suggestions, as I love when people blow my mind with something I hadn't considered or a novel idea! 💪❤
Good point on the border for 1.4.1, I hadn't noticed the subtle border change between chosen and other star shapes.
You are mistaken on 3.3.2 Labels or instructions when you mention programmatic structure, accessible names, or accessible descriptions. This criterion is not intended for screen readers.
Look man, I'm on your side, but it peeves me that you mentioned it is accessible and do not take feedback.
Edit: I would caution you about using the words that it works for the majority of users, as people with disabilities will always be a minority group.
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!