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.


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


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.


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>
display: block;
background: url(images/logo.png);
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.

notices/html-css/ne-pas-utiliser-css-pour-afficher-les-images-porteuses-d-information.txt · Last modified: 11 June 2013 at 14:37 by Sébastien Delorme (Atalan)

Project coordinated by Atalan.

In partnership with: