When switching to one of the high contrast settings in Windows the player is not visible, except for current and duration times. The background images used for styling of buttons and background are not utilized in high contrast mode (see below).
Has this issue been considered before?
No this was never pointed out. Thanks for that. @albell can you check this as a part of your current work with the stylesheet?
From just browsing around quickly now, my understanding is that not rendering background images in HCM is an IE behavior. Edge renders bg images in HCM. @Pawluczkowycz what OS/browser is the screenshot above from?
It looks like there are two common solutions for this issue:
Unfortunately I don't have a PC, and I think this needs native testing. An emulator probably won't suffice.
@Pawluczkowycz do you have experience with workarounds for this issue?
Yes, the pic was from Windows10/IE11, same thing for Windows7/IE10 too. (I've been avoiding Edge because of JAWS screen reader issues.)
As for a workaround, I used a high contrast detection function, checkHC(), from:
And then added CSS outlines around the buttons, player and sliders, and inserted play/pause and mute/unmute text on the buttons.
All of which is serviceable, but less than ideal.
@Pawluczkowycz and @albell I found a possible solution for this without disturbing the current markup. http://hardlikesoftware.com/weblog/2009/11/04/css-sprites-vs-high-contrast-mode/. Seems a smart approach and I can add a configuration element to activate the high contrast workflow as well as one to determine the location or path of the icons sprite. For the progress bar and volume, so far I think putting a white border will be enough. Let me know your thoughts about this