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>
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.