Summary

CSS sprite maps improve efficiency by making fewer HTTP requests to the server, but most implementations cause serious problems for users who view content in high contrast mode.

Author: Gez Lemon

CSS for Presentation

Most people realise that CSS is for the presentation layer, and that they shouldn't provide main content with CSS. However, CSS sprite maps are surprisingly common due to their performance improvement in fetching a single image instead of making several HTTP requests to fetch several images from the server. These implementations tend to use empty elements, and the presentation is provided through CSS: 

<a href="next.php" class="np" title="Next page"></a>

Screen Readers

The above is an example of where the title attribute's content is available to assistive technologies, as it's mapped to the accessibility architecture by browsers in the absence of a proper link phrase; similar to how the title attribute can be reliably used on form controls in the absence of an explicitly associated label. This is true of all elements that receive keyboard focus, but not reliable for non-interactive elements.

Accessibility Issue of Depending on CSS

If the above example is displayed visually, and also available for screen reader users, what is the problem with providing the content with CSS? Obviously, if CSS isn't available the content wouldn't be displayed, but that's a device independence issue, rather than an accessibility issue. You could argue that the user has a responsibility to use a browser that supports the technologies you have used; particularly as most common graphical browsers have supported CSS as basic as this for many years. As most browsers also support zooming, the image can easily be increased so that it's also suitable for people with visual impairments that don't use assistive technologies. The problem here is when the content is viewed in high contrast mode.

High Contrast Mode and CSS

In high contrast mode, CSS content is considered decorative, and therefore disposable. If you view a web page in high contrast mode in Windows, you'll notice that all background images provided with CSS are removed, and therefore no longer available to your users. A Forster Research study commissioned by Microsoft a few years back revealed that 12% of computer users use accessibility features such as large fonts, high contrast, and special keyboards, so this is a serious issue.

Last year, Steve Faulkner provided a solution for ensuring content is available in high contrast mode for CSS sprites.

Category: Accessibility.

Comments

  1. [colour-contrast-css-sprite-maps.php#comment1]

    In your html example above, there is nothing between the open & close tags. I'd expect the words "Next Page". Was that intentional, to serve your point?

    Posted by jen on

  2. [colour-contrast-css-sprite-maps.php#comment2]

    Hi Jen,

    Almost all implementations of this technique provide CSS background content to empty elements, such as the example I've provided (the point of this post).

    Posted by Gez on

  4. [colour-contrast-css-sprite-maps.php#comment4]

    Hi Michelangelo,

    I'm away from home at the moment with limited Internet access, so excuse the brief reply.

    Both Steve and Thierry's technques are workable solutions. I would also echo Steve that developer's should use a high contrast detection script, such as the one Steve mentions, and swap high contrast sprites as an alternative when the user is in high contrast mode.

    Posted by Gez on

  5. [colour-contrast-css-sprite-maps.php#comment5]

    In your example, there's also a SEO problem since it's better to have always an optimized text for all links. Perhaps this text coulb be hidden with CSS only for standard browsers (and not readers)?

    Posted by Nicolas Chevallier on

  6. [colour-contrast-css-sprite-maps.php#comment6]

    Hi Nicolas,

    Good point, but the types of applications that employ these techniques aren't usually worried about SEO, as they're usually private applications (such as web-based email clients). Also, the techniques don't usually contain things people would want indexed, such as "Next Page", "Print", "Close", and so on.

    Posted by Gez on

  7. [colour-contrast-css-sprite-maps.php#comment7]

    " <a href="next.php" class="np" title="Next page"></a> "

    don´t work on my other Webseite ( its not finish )

    Can u help me?

    Many regards from Germany and sorry for my poor English

    Posted by qplayz on

  8. [colour-contrast-css-sprite-maps.php#comment8]

    @Nicolas I hope I'm not missing your point, but if your goal was SEO: Why would you hide links that could potentially be greeted with a penalty from Google?

    Posted by Donnie on

  9. [colour-contrast-css-sprite-maps.php#comment9]

    We use a technique similar to the Steve Faulkner one, but place the icon/image over the text using a empty <span> element.
    eg
    <a href="#">Link Text<span></span></a>

    However i don't think this would be much use for small icons if background images were disabled.

    Posted by John Cashmore on

  10. [colour-contrast-css-sprite-maps.php#comment10]

    I personally don't use sprite because some images are well optimized in jpeg and some PNG. A single sprite would make them bigger in size.

    Posted by A.Cobus on

Comments are closed for this entry.