Stars invisible in high contrast mode

[scottaohara]

Hi again.

I was checking starability, since it's been awhile, and noticed that if a user has high contrast mode enabled, that all of the stars vanish, due to them being background images.

Thinking of solutions for this, I've gotten around this issue by using SVGs in place of background images, though I realize that'd be quite a bit of work, and could make some of the animations difficult.

That said, being in high contrast mode, design isn't nearly as critical, as much as it's about having a usable interface. With that in mind, an alternative could be to have a high contrast mode media query where the UI changed from ☆ ☆ vs ★ ★ to indicated a selected vs non-selected rating.

While typically I wouldn't want to use those sorts of characters in CSS content, to mitigate the possibility of screen readers reading out "black star" and such, I'd consider it a minor annoyance for the individuals who are using both a screen reader & high contrast mode. And it would far outweigh the annoyance of having invisible UI.

Let me know if you have any questions about this that I didn't cover.

Thanks :)

[szynszyliszys]

Hi @scottaohara I just took a look at that and I believe that it is impossible to replace the background with a unicode character in the current setup: starability is using image sprites for that and a pretty neat hack to enable hovering the stars. Rewriting it with svg could indeed break some of the animations.

How about we remove the styling in case someone is using a high contrast mode? Then these are just regular radio buttons that are accessible?

[scottaohara]

Yeh, that makes sense. I had to fiddle with it quite a bit to get the stars to show up with CSS content.

But yeh, I think just falling back to regular radio buttons is a great idea. :)

[szynszyliszys]

Can you take a look at the PR @scottaohara? I only found info on how to make a query for Windows support. Is there any other way I could support this for MacOS? Or it is known that it is better to use Windows if one has a need for high contrast mode? #33

[scottaohara]

Gave the branch a quick test on my PC and the radio buttons are visible.

Right now high contrast mode is a windows thing that IE, Edge, and mostly-firefox support.

Apple has things like inverted colors and such, but that doesn't remove background images like high contrast mode does. So this should be a-ok for macs still.

[szynszyliszys]

@scottaohara thank you! Will merge it then :)