High Contrast Proof CSS Sprites

CSS sprites are a useful method to display graphics while preserving bandwith and improving page rendering times. One of the problems with CSS sprites when it comes to their accessibility is that some operating system display themes such as Windows High Contrast mode have the effect of hiding CSS background images. So if an alternative version of the image is to be displayed when a user changes the default theme to suit their requirements, the developer has needed to provide an alternative with images inserted inline rather than as CSS background images. In many cases the developer does not do this, as it is a lot of extra work and undermines the performance benefits of CSS sprites.

Interfaces can become unusable when high contrast mode is enabled

If for example, I enable Windows high contrast mode while editing this post, the editor interface changes from usable to unusable, as I no longer have any idea what the majority of the buttons on the editor do.

Enabling Windows high contrast mode

• Windows XP – Choose a High Contrast Color Combination to Improve Screen Resolution
• Vista – Turn on High Contrast and change the settings

CSS sprites using the before: pseudo element

An alternative to implementing CSS sprites using the traditonal background-image method is available and it resolves the issue of images not being displayed in high contrast mode. This alternative method makes use of the CSS before: pseudo element (note: the after: pseudo element could also be used).

Example:

CSS

span.test1:before {
margin-right: -10px;
content: url(icons.png);
position:relative;
left:-2px;
top:-109px;
}

span.test1 {width:17px;
height:18px;
display:inline-block;
overflow:hidden;}

HTML

<a href="#"><span class="test1"></span>Home</a>

Further examples are available on the CSS sprites using the before: pseudo element example page.

Notes:

• This is only a proof of concept. I am sure this method can be improved by people who have better CSS skills.
• The use of the same set icon set for both default and high contrast view is not recommended as the contrast, as in the case of the examples, may be poor when high contrast mode is enabled. A high contrast mode detection script is available, which can be used to swap icon sets as appropriate.
• I have tested this method in IE 8 (previous versions don’t support before: selector), Firefox 3.6, Opera 10.10, Safari 4 and Chrome 4. They all seem to work fine, but the high contrast mode aspect is currently moot for Opera, Chrome and safari, as they don’t yet support Windows high contrast mode.