CSS Background Images and Accessibility

There have been a spattering of articles discussing background images and their accessibility issues. There does not seem to be a clear solution for all browsers and a discussion of all current techniques in one place.

The Issue

CSS Background images are often used instead of inline images because they can be used as CSS sprite maps. A sprite map is a way of using one images and only displaying a small portion of that image as a specific icon or page element like a page tab. Because only one image is sent it is faster than many small images and can improve page performance.

The primary issue with non decorative CSS background images is that when images are turned off or when high contrast mode is enabled (for example, under the Windows OS) background images disappear. If the background image either contains text as in the case of page tabs or provides meaningful icon imagery then users of high contrast mode and those without images will not see that content. While this can affect screen reader only users, it is more easily solved for screen reader users by using the title attribute on image links and off-screen text inside the containers that hold the background images.

Comparison to Inline Images

This issue is different for standard inline image as when those are removed browsers insert the alt text on the screen in place of them. This can be an issue for small icons where there is not much room but for many images it is not an issue.

Requirements

For images of text — which this technique is often used for — there is a clear WCAG 2 Level AA requirement to not use images of text when text can be rendered by the technology platform. For web based applications text can almost always be produced with exception of fonts that may not be on users systems. In these cases a Cufon style technique can be used. The issue still remains for images that are not of text but are meaningful and the issues still is relevant to other accessibility requirements such as Section 508.

Solutions

It is not possible to just hide the text behind something as the CSS background image is a background image and thus no setting of its opacity will cause the text in the element that contains it to be covered up. There are several possible concept solutions.

Do not use Background Images

Just replace non-decorative CSS background with standard inline images. This solution does not solve the issue of performance but does provide an accessible solution and is how many sites have been rendered for the past 15 years.

Position Portions of an Inline Image

Do not use background images — use inline images but using CSS to position only the portion of the image that you want visible at the desired elements. Basically this involves creating an inline image sprite map. Information on this technique can be found in the TJK Design CSS Sprite article.

Use Before or After Pseudo Elements

To display the images pseudo elements can be used. This technique works fine for images to keep them on-screen but is not supported by some browsers mainly Internet Explorer 7. Information on this technique can be found on the Paciello Group blog. Additionally, pseudo elements do not appear to be selectable.

Use the HTML 5 Canvas

The canvas element can be used to display the image and position the canvas on top of the text inside the element. This is the technique that Cufon uses when HTML 5 is supported. Otherwise Cufon uses VML to render custom fonts. Cufon break each word into a separate span element and thus one side effect of using Cufon is that text can be broken apart when read with a screen reader.

Use CSS Positioning Trickery

It may be possible to place the Background Image as a child of (but over) the element containing a text equivalent. Then make the size of the parent the width of image. When background images are turned off the text appears in some browsers and the text will also be accessible to screen readers.

This method does not appear to work consistently across browsers. Firefox still displays the text over the background image while Internet Explorer does obscure the text behind the image. Although in high contrast mode Internet Explorer did not re-show the text properly.

Conclusion

In conclusion, the only method that is truly accessible and supported by nearly all browsers is to use inline images instead of background CSS images to display non-decorative content. If sprite maps are required then consider using inline positioned sprite maps.

Looking to advance your team’s knowledge of web accessibility best practices?

Learn more about our expert-led onsite workshops and our e-learning portal.