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.

My Account application

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

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.

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. Please be gentle.

Questions?

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