Archive for the ‘Accessibility’ Topic

Foreground <img> Sprites – High Contrast Mode Optimization

Apr ‘10 20

An issue that has stressed the relationship between web performance and accessibility is the little known fact that CSS image sprites, a technique used to reduce image HTTP requests, dissappear in Microsoft Windows’ high contrast mode. This is because they are typically created using the background-image CSS property.

To demonstrate this issue, let’s take a look at some popular websites in High Contrast mode.

In Google Video, the next and previous buttons dissappear:

screen shot in high contrast mode showing arrows dissappear in google video

In Yahoo Finance, the navigational tabs and buttons dissappear:

screen shot of yahoo finance tabs and buttons going away in high contrast mode

In sites like Facebook, Amazon and AOL Music, logos vanish from thin air…err, screen:

facbook logo dissappear in high contrast

amazon logo dissapear in high contrastaol music dissappear in high contrast

Popular content sharing service AddThis also incorporates CSS sprites for its toolbox sharing buttons:

addthis screen shot

It is great more sites are using sprites to deliver a faster user experience, however we need to recognize (myself included) we are damaging the user experience for High Contrast users.

Introducing <img> Sprites

While noodling over a new design for AOL.com that featured graphical headers using our new corporate identity font, I decided to prototype something I had thought about a couple years ago but never got around to doing.

Since <img> elements show up in High Contrast mode, why not try to crop the image to show what we want?

Our example HTML for graphic headers in this case look like this:

<h2 class="popular"><img src="img-sprite.png" alt="" />Featured</h2>
<h2 class="featured"><img src="img-sprite.png" alt="" />Popular</h2>

We set the alt attribute to "" so screen readers skip over it. We include the "Featured" text so search engines have an understanding of what this section is about (more powerful than alt text).

The following CSS is then applied to crop the parts of the image we want:

h2 {
	overflow: hidden;
	position: relative;
	height: 50px;
	width: 200px;
}
h2 img {
	position: relative;
}
h2.popular img {
	top: -100px;
}
h2.featured img {
	top: -200px;
}

Simply set the height (and width if needed) on the outer container (in this case, the <h2>) to the size of the image you want to crop, and play around with top (and left if needed) to move the image into place.

Verifying Your Implementation

high contrast accessibility panelTo enable High Contrast mode in Windows:

  1. Start Menu… Control Panel
  2. Open Accessibility Options
  3. Click on the Display tab
  4. Ceck the High Contrast checkbox
  5. Click Apply to see the effect.

Or…

  1. Alt + Shift + Printscreen

<img> Sprite Working Demos

Check out our CSS Sprites Demo, and then turn on High Contrast mode. Then, visit the <img> Sprite page to see the difference.

Known Limitations

For image cropping to work, it must be inside a block element or an inline element with the CSS property display: block.

Chris Blouch, AOL’s resident accessibility expert tested this technique out on various HTML elements and found that we cannot crop <img> elements inside the following elements:

  • Fail to crop: <fieldset>, <legend>, <input>, <button>, <table>, <tr>, <td>, <th>

All other tags should work, please leave a comment if you find otherwise.

This solution has been tested to work in IE6+, Firefox 3.5+, Chrome and Safari 4+ and it is expected to work in all future browsers.

Detecting High Contrast Mode

Chris Blouch also created a High Contrast detector as part of the AXS Accessibility JavaScript Library. It should come in handy if you are really having trouble getting your site to look good in High Contrast mode.

  • http://dev.aol.com/downloads/axs1.2/readme.html#hd

More Information on High Contrast Mode

This video gives a nice overview of the challenges facing people with a low vision disability. At 19:38 the host goes through some of the accessibility tools available in Windows like High Contrast mode:

Bonus! Printable Image Sprites!

A couple commenters pointed out background images don’t print by default and this technique solves that. Here’s a print preview of my demo pages in Firefox for some evidence.

CSS Sprites Printed

screen shot of css sprite printed, images not showing up

<img> Sprites Printed

screen shot of img sprite printed, images showing up

I guess I shouldn’t assume it looks good in IE too, let me know if it doesn’t.

Further Reading

I wanted to call out Thierry Koblentz, he kindly informed me (see comments) that he wrote about this exact technique save for me going the relative positioning route. Turns out I’m not as original as I thought — nice job Thierry.

Please index me, experiment!

“If she were a president she would be Babe-raham Lincoln.” — Garth Algar