5.2.1. Ne pas utiliser CSS pour afficher les images porteuses d'informations

Les CSS ne doivent jamais être utilisées pour afficher les images porteuses d’informations.

En d’autres termes, chaque fois qu’une image apporte de l’information, elle doit être intégrée en dur dans le code HTML, la plupart du temps avec la balise <img />.

Remarque

L’usage de sprites (images chargées en arrière-plan via CSS) n’est donc pas autorisé pour les images porteuses d’informations.

Astuce

Sont considérées comme porteuses d’informations toutes les images qui entraîneraient une perte de contenus ou de fonctionnalités, si elles n’étaient pas disponibles :

Logos.
Images-textes.
Liens et boutons-images.
Etc.

Attention

En particulier, la technique qui consiste à sortir un texte de l’écran pour le remplacer par une image d’arrière-plan ne doit jamais être utilisée.

Lorsque les styles ne sont pas chargés en totalité, ou qu’ils sont modifiés par l’utilisateur, l’information peut être perdue.

<a href="/" id="logo">[Le texte de mon logo]</a>

a#logo
{
display: block;
background: url(images/logo.png);
text‐indent: ‐999999px;
width: 300px;
height: 100px;
}

Cette technique est à remplacer par l’utilisation de HTML pur. Par la suite, c’est le JavaScript qui doit être utilisé pour modifier dynamiquement l’image au survol si besoin.

<a href="/" id="logo"><img src="images/logo.png" alt="[Le texte de mon logo]" /></a>

Si l’image n’est pas chargée, alors le texte de remplacement sera affiché à la place et l’information ne sera pas perdue.

Recommandations associées

Recommandation précédente : 5.1.1. Utiliser une alternative vide (alt="") sur les images décoratives et illustratives
Recommandation suivante : 5.2.2. Renseigner l'attribut alt sur les images informatives