Star Rating and use of color in WCAG 2.1

[eps1lon]

On http://ebay.github.io/mindpatterns/input/star-rating/index.html you show an example for a star based rating. It looks like the current value is only encoded in color with no additional indicator or text.

Wouldn't this violate success criterion 1.4.1 in WCAG 2.1?

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

-- https://www.w3.org/TR/WCAG21/#use-of-color

An example of a star rating on w3.org has an additional underline for the current values. This underline is probably added to meet this specific requirement. A different workaround is explained in another success criterion in WCAG 2.1: Applying a thicker border to stars that are selected. This can be found under "Relationship with Use of Color and Focus Visible" on https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html.

Would love to get your opinion on this success criterion and how it affects your Star Rating component.

[ianmcburnie]

@eps1lon You are absolutely correct. Thank you for bringing this to our attention. This was actually on our radar to fix about two or three years ago, but we were waiting around for the SVG assets, and those never arrived and we forgot all about it!

However, we do now have the SVG assets and so I will leave this ticket open and hopefully get the fix in soon.

Thanks again!

(these should hopefully work nicely when inverted for dark mode too)

[ianmcburnie]

I have pushed a quick fix that solves the immediate colour contrast problems in the examples. I'm probably only scratching the surface here, as we have not looked into other scenarios and states, but just taking this one step at a time.

On the eBay.com side of things, we'll no doubt want to do a more thorough investigation across the board and I'm sure we can leverage some of the excellent work & research of @eps1lon and @oliviertassinari.

So I'm considering this a needed improvement, and accessibility defect fix, but by no means the end of the story :-)

Side note: the star rating is no longer pure CSS. The example uses a little bit of simple JavaScript.

Before:

After:

WCAG: