Download - 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 blindness1
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...
1 http://www.color-blindness.com/2006/04/28/colorblind-population/
2012 © Skype. The year is incorrect on this slide.
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
Left Alt + Shift + Print Screen
System Preferences → Accessibility → Display → Invert Colors
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.
2013 © Skype. But don’t forget about XSS.
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. The cake is a lie.
“Transparent” borderSimply add an invisible border to an element
.box { background: #00AFF0; border: 1px solid transparent; color: #FFF;}
Regular
High Contrast without border
High Contrast
Replacing CSS background-image spritesbackground-image images are removed in High Contrast Mode
Solutions:
• :before element (needs hacks for IE7)
• <img> sprites with overflow
Examples: http://yaccessibilityblog.com/library/high-contrast-friendly-icons.html
2013 © Skype. Talk about images and not a single photo from Flickr with a funny caption. Disgrace.
2013 © Skype. Chicken or an egg? Dinosaurs were first.
CSS sprites using :beforePros:
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. Too much sugar in sprites for my taste.
CSS sprites using <img> Pros:
Works in all browsers
Cons:
Requires changes and additional markup in HTML
2013 © Skype. Only five more to go.
Overriding default system theme
You can‘t.
Unless you have IE10 or newer on Windows 8 (or newer).
-ms-high-contrast: active mediaquery
http://msdn.microsoft.com/en-us/library/ie/hh771830%28v=vs.85%29.aspx
2013 © Skype. Oops.
Mediaquery example.errorMessage { background: #FFEED9 url('error.svg') no-repeat 0 0; border: 1px solid red;}
@media screen and (-ms-high-contrast: active) { .errorMessage { background: #290500 url('error.svg') no-repeat 0 0; border-color: #FF7272; }}
Regular
High Contrast
High Contrast + override
2013 © Skype. Not a shameless promotion at all.
Further reading
http://jobs.skype.com
http://www.colour-blindness.com/
http://yaccessibilityblog.com/library/high-contrast-friendly-icons.html
http://msdn.microsoft.com/en-us/library/ie/hh771830%28v=vs.85%29.aspx
http://www.bing.com/search?q=high+contrast+mode