Jakub Tománek 2013 © Skype. Commercially non-confidential. Accessibility in High Contrast Mode

2013 © Skype. If you have received this presentation in error, please delete it and notify me immediately.

Why should you make pages accessible? It’s the law It will bring you more users and thus more money Or just because you actually like your job and want to do it right 2013 © Skype. It‘s only logical.

Reasons for using High Contrast Mode Users with low vision Colour-blind people; 8% of male population has red-green colour blindness 1 Users with eyes sensitive to light Personal preference (night owls) 2013 © Skype. And at last I see the light and it‘s like the fog has lifted

OS / Browser support Windows: Internet Explorer supports High Contrast Mode Firefox supports High Contrast Mode, but doesn‘t adhere to system colour settings Chrome has only message “Install plugin”. Plugin doesn‘t really do high contrast Mac: Mac has “invert colours” instead of High Contrast Mode 2012 © Skype. The year is incorrect on this slide. Left Alt + Shift + Print Screen System Preferences → Accessibility → Display → Invert Colors

2013 © Skype. It’s not what it seems. Before After

2013 © Skype. On the left, you have reached the end of the internet. Before After

Technical solutions 2013 © Skype. Use 1% solution of copric sulfate to maximize the efficiency.

Improving pages for High Contrast Mode Detecting High Contrast Mode Transparent border No background-image for images which need to be shown (CSS sprites) Overriding default theme 2013 © Skype. You’re most transparent to me. I can see right through you.

Detecting High Contrast Mode Inject an element with background-image and check periodically if the background-image is still on the element Works only in IE and Firefox on Windows Adds unnecessary overhead Using media queries IE10+, Windows 8 only 2013 © Skype. But don’t forget about XSS.

“Transparent” border Simply add an invisible border to an element.box { background: #00AFF0; border: 1px solid transparent; color: #FFF; } 2013 © Skype. The cake is a lie. Regular High Contrast without border High Contrast

Replacing CSS background-image sprites background-image images are removed in High Contrast Mode Solutions: :before element (needs hacks for IE7) sprites with overflow Examples: © Skype. Talk about images and not a single photo from Flickr with a funny caption. Disgrace.

CSS sprites using :before Pros: Pure CSS solution Cons: Doesn’t work in IE7 Solutions for IE7: CSS hacks (conditional CSS or *property): doesn’t work in High Contrast Mode Expressions: might affect performance 2013 © Skype. Chicken or an egg? Dinosaurs were first.

CSS sprites using Pros: Works in all browsers Cons: Requires changes and additional markup in HTML 2013 © Skype. Too much sugar in sprites for my taste.

Overriding default system theme You can‘t. Unless you have IE10 or newer on Windows 8 (or newer). -ms-high-contrast: active mediaquery © Skype. Only five more to go.

Mediaquery example.errorMessage { background: #FFEED9 url('error.svg') no-repeat 0 0; border: 1px solid red; screen and (-ms-high-contrast: active) {.errorMessage { background: # url('error.svg') no-repeat 0 0; border-color: #FF7272; } 2013 © Skype. Oops. Regular High Contrast High Contrast + override

Questions? 2013 © Skype. Please be gentle.

Further reading © Skype. Not a shameless promotion at all.