5.2.1. Do not use CSS to display informative images

CSS must never be used to display images that convey information.

In other words, each time there is an image that conveys information, it must be hard coded in the HTML, usually with the <img /> tag.

Note

Using image sprites (images loaded in the background with CSS) is therefore not authorized for images that convey information.

Tip

All images whose absence would lead to a loss of content or functionality are considered to be informative:

  • Logos.
  • Text-images.
  • Links and image-buttons.
  • Etc.

Warning

Make sure you never use the technique which moves text outside the screen and replaces it with a background image.

When styles are not loaded in their entirety, or when they are modified by the user, the information may be lost. 

<a href="/" id="logo">[text of my logo]</a>
a#logo
{
display: block;
background: url(images/logo.png);
text‐indent: ‐999999px;
width: 300px;
height: 100px;
}

This technique should be replaced by using pure HTML. Subsequently, JavaScript can be used to dynamically modify the image on mouse-over, if required. 

<a href="/" id="logo"><img src="images/logo.png" alt="[text of my logo]" /></a>

If the image is not loaded, then the alternate text will be displayed instead, and the information will not be lost.