Player is not accessible in high contrast mode #1912

Open
Pawluczkowycz opened this Issue Nov 2, 2016 · 4 comments

Projects

None yet

3 participants

@Pawluczkowycz

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?

highcontrastme

@ron666
Collaborator
ron666 commented Nov 2, 2016

No this was never pointed out. Thanks for that. @albell can you check this as a part of your current work with the stylesheet?

@albell
Contributor
albell commented Nov 2, 2016

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:

  • Use text instead of an image:

https://www.paciellogroup.com/blog/2012/08/notes-on-accessible-css-image-sprites/

  • Or use pseudo-elements for the images:

http://www.ssbbartgroup.com/blog/css-background-images-and-accessibility/

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?

@Pawluczkowycz

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:
https://www.paciellogroup.com/blog/2011/10/detecting-if-images-are-disabled-in-browsers/

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.

@ron666 ron666 added the Bug label Nov 15, 2016
@ron666
Collaborator
ron666 commented Dec 19, 2016

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment