Foreground <img> Sprites – High Contrast Mode Optimization

Bookmark and Share

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.

Bookmark and Share

25 Responses to “Foreground <img> Sprites – High Contrast Mode Optimization”

Leave a Reply »

  1. Aaron Peters lessoned... April 21st, 2010 at 1:33 pm

    Dave,

    this is great!!!
    fyi, tested it in FF3.0.19 and works fine.

    One question: in your opinion, what are the downsides of leaving the alt tag empty?
    Usability, SEO (Google Images!), other….

    Keep up the good work!

    Aaron

  2. ArtzStudio shouted... April 21st, 2010 at 5:48 pm

    Hey Aaron, cool to hear from you :)

    SEO: Most of the things you’d want to do this with (headers, buttons, logos) you wouldn’t want to have indexed by Google Image Search. I’d almost want to include them in robots.txt so they didn’t snag the sprite. As for leaving alt text empty, just be sure to include the text in the container and Google will have more than enough to weight for those terms.

    Usability: It’s interesting, I disabled images on my IMG Sprite Demo page and the original text showed up. This is because if you noticed, I didn’t set a width and height on the image so the browser doesn’t push the text out of the container (hiding it). On text only browsers, since we include the text in the container, it should definitely still be useful. Anything else that we should think about?

  3. Sergey Chernyshev tipped... May 4th, 2010 at 8:46 am

    Dave,

    Great technique!
    I would imagine that this also works better on printers (without switching browsers to print backgrounds).

    Seems too good to be true as well. Any idea why this was never used before?
    Seems like a huge miss by those who implemented background-image sprites as a best practice!

    Sergey

  4. ArtzStudio uttered... May 4th, 2010 at 5:40 pm

    I haven’t tried printing it out…If you have a printer handy, print out both demo pages and take pictures for me and I’ll post them :)

    There’s still a place for background-image sprites, especially for non-essential design elements such as gradients, rounded corners, etc. I think once we venture into the realm of image text, icon buttons and logos, we’ll want to go the <img> route.

  5. Some links for light reading (5/05/10) | Max Design reckoned... May 4th, 2010 at 6:05 pm

    [...] img Sprites – High Contrast Mode Optimization [...]

  6. Thierry Koblentz howled... May 4th, 2010 at 6:50 pm

    I believe I came up with this solution a while back:
    http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

    Another advantage is that unlike background-images, elements are printed (they can also scale).

  7. Divx to iPad barked... May 4th, 2010 at 6:58 pm

    I think this is very good!

  8. Pat Rees barked... May 4th, 2010 at 7:24 pm

    I tried with css off. Not pretty. Each location of the “sprite” displayed image shows the entire sprite and the viewer would have no clue what is going on. This is a basic requirement of WCAG.

    The alt attribute is specifically used to provide the equivalent content for an image. I’m not sure I would go to the trouble to use and hide text, just for a slight SEO boost. This the opposite of what accessibilty advocates are trying to get us to understand and is confusing for new web designers learning standards.

    One reason why many are using background images for buttons and widgets, is that you can get easily the hover effect in the css. For an inline image that is a button or link, you will need JavaScript to provide the rollover effect.

    Another problem with this technique if you re-size text only with images off in regular browser, the text will be clipped, although more browsers use zoom to re-size the whole page an not just text.

  9. ArtzStudio hazarded... May 4th, 2010 at 8:25 pm

    @Thierry – Kudos! I did search around after writing it and couldn’t find anything. You also document a technique we internally at AOL called “iCE” (image content exposure), a technique we use for non-sprited images to avoid any text-indent/cloaking hackery. Funny I never connected the dots till now.

    @Pat – How do you turn CSS off (without the Web Developer toolbar)? :) On the alt text issue, I would argue that a screen reader should get the benefit of *real* header text rather than hearing that it’s an image. I definitely think having text in the header is well worth it to Google too, as we’ve seen benefits in ranking when tweaking <h2>’s. Last I checked Yahoo and Bing don’t even index alt text as part of the document. Good point on the :hover effect, that’s definitely a drawback I hadn’t considered and would be messy to hack together with JS. Thanks for the sanity check.

  10. Thierry Koblentz voiced... May 4th, 2010 at 9:32 pm

    @Pat
    If you check my article at http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp you’ll see that turning CSS off is not an issue. The key is to zero out dimensions via HTML and set proper value using CSS.
    And, fwiw, I agree with “ArtzStudio” about the SEO benefit. In any case, the empty “alt” attributes would not cause accessibility issues.
    Regarding clipping, I believe a technique derived from this one would work: http://tjkdesign.com/articles/tip_5.asp
    And regarding the rollover effect I don’t see the difference with this technique and a background image technique (I may be missing something though). What do you think would be the blocker?

    @ArtzStudio
    Thanks. I like “iCE” better than “TIP” though ;)

  11. mike foskett tipped... May 5th, 2010 at 2:18 am

    An excellent in-depth article but I still fail to agree with any CSS-Sprite technique in practice.
    Even though I have and do use them.
    CSS-Sprites present an overly complex solution to a basically simple problem.

    Images should only be replaced if the are background graphics, that is purely for prettifying, and never if it’s content related.

    If saving a few image HTTP requests is really important to your site performance investigate usage of the Data URI scheme.
    Combined with gzip or deflate, caching, and conditional comments for IE prior to v8, and you’re ready to rock.

    Works for both content images and background graphics.
    HTTP requests for images?
    That’ll be a big 0.
    The Data URI scheme will hopefully relegate CSS-Sprites to become the historic relic they deserve.

  12. Michelangelo sounded... May 5th, 2010 at 6:21 am

    This is excellent, thanks. I am in the middle of an implementation that will greatly benefit from this technique. By the way, do you have any stats regarding usage of the Windows high contrast mode vs. third party software like Zoomtext? Also, am I correct in thinking that Zoomtext’s high contrast mode displays background images correctly?

  13. ArtzStudio warned... May 5th, 2010 at 7:00 am

    @Mike – While I agree with you, our challenge is ensuring our IE7 and lower users (50% of our audience) get a faster experience than our competitors and image sprites help us towards this goal. They can also make skinning and maintenance easier when used effectively. That said, I need to look into MHTML, a solution for Data URIs in IE6/7 that Stoyan blogged about here.

    @Michelangelo – I don’t have stats but will ask someone from our Accessibility department at AOL to chime in. I have to think Zoomtext is more popular based on the youtube video I posted above. It does appear to display background images.

  14. Thierry Koblentz wrote... May 5th, 2010 at 7:42 am

    @ArtzStudio
    I cannot find a contact form or link on this site, but I wanted to tell you that I kind of expected you to mention in your article that there was “prior art”. After my first post, I thought you would acknowledge that in the article itself (as we know, most people do not read comments).
    Thanks.

  15. ArtzStudio articulated... May 5th, 2010 at 11:54 am

    @Thierry – Done, I meant in no way to infringe on any patents you may hold :)

  16. Richard - web accessibility testing twisted... May 5th, 2010 at 12:18 pm

    I can see why you remove the alt text in the example heading you give, but I think it is important to emphasise that alt text should be present where the image has informational meaning that isn’t otherwise presented as text. For example in the case of buttons disappearing from Google video, if these were changed to an image sprite then it wouldn’t solve the accessibility problem because the individual buttons need to have alt text of “previous” and “next” or similar. A single sprite image wouldn’t be able to identify this.
    I do think that sprites can be used in some circumstances, but rarely in the case of informational images, in which case the problem of the image disappearing in high-contrast mode is no longer a problem.
    The only situation I can think of where an html sprite image might work is if you had the same information repeated across the different parts of the image (so only one alt text is needed), e.g. a form submit button that was portrayed in different fonts or colours on different parts of the page.

  17. Thierry Koblentz reckoned... May 5th, 2010 at 4:33 pm

    @ArtzStudio Thanks. It’s pending… :)

  18. fwolf uttered... May 5th, 2010 at 11:02 pm

    @ArtzStudio + Pat: About the hover problem – I think it should still be possible to get this done [without] using Javascript. At least, for any tag that encloses an image tag, ie. in the standard case that would be an linked image (a + img tag).

    In said example, that should be something like

    h2 a:hover img {
    top: -300px; // the hover state is starting at a height of 300px
    }

    cu, w0lf.

  19. fwolf reckoned... May 5th, 2010 at 11:41 pm

    Ok … tested my hover idea, and looks like it works (except IE _OF COURSE_, but I havent tested out the absolute position-method yet, maybe that one does) ;)

    cu, w0lf.

  20. Chris Blouch notified... May 6th, 2010 at 8:00 am

    @Michelangelo – While there are techniques for discerning whether someone has AT (assistive technology) running on windows making use of the MSAA (microsoft active accessibility) API or high contrast mode, this question quickly moves into the realm of consumer advocacy and privacy. Most AT users do not want to self-identify as having some kind of disability or have us probing their system to find out. It’s a tough nut because we would really like to know so we can make stronger arguments for supporting AT in our products, but privacy does and should trump this desire for personal user data.

  21. Thierry Koblentz said... June 12th, 2010 at 8:06 pm

    @ArtzStudio your method enhances my solution regarding transparent images as you use the image to push the text down while I am hiding that text behind the image. Slightly different, but it solves a real problem. I’ll use that :)

  22. Dallas Despain articulated... December 22nd, 2010 at 11:46 am

    I was just barely looking for a solution to this and I found your article on twitter. Great info. My only concern is that I feel like we’re doing back flips to solve the limitations of Windows high contrast mode. If the comments above are to be believed, magic handles css background images “correctly”, and my own testing verifies that OS X high contrast mode also displays background images.

    I suppose the definition of “correctly” handling background images in high contrast mode could be debated. Does anyone know why Windows chooses not to display them? CSS background images are assumed to be decorative only for the purposes of screen readers and if not, some text alternative should be provided, but for a low vision user, they do provide value. OS X does a much better job by reversing the colors in the images.

    I do realize that none of us has the power to change Windows I contrast mode, but perhaps we should submit a bug and notify them that they’re forcing web developers to get very creative to solve a shortcoming in Windows high contrast mode

  23. CSS Sprites w/out Using Background Images | Photoshop Tutorial sounded... June 5th, 2011 at 8:15 am

    [...] Sprites – High Contrast Mode Optimization [...]

  24. Bryan sounded... January 18th, 2012 at 7:50 pm

    I have a question about sprites. Would it be “wrong” to put the css rules for the sprite directly in the tag? I was trying to think of a way to create helper methods within templates to render an image sprite.

  25. ArtzStudio tipped... February 27th, 2012 at 9:12 pm

    It’s good practice to avoid inline styles if you can help it to keep the HTML lean, and it is generally considered easier to update stylesheets vs. mucking around in the markup. That said if it is more convenient from a development standpoint for you to maintain, it may be worth it in your situation.

Leave a Reply

Please index me, experiment!

“Alright, let’s see what you got white shadow!” — Chip Douglas