6.5. Ne pas utiliser CSS pour afficher les images porteuses d’informations

Les CSS ne doivent pas ê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 (via balise <img /> ou svg, par exemple).

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.
  • Images-liens et boutons.
  • 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 pas être utilisée.

Lorsque les images ne sont pas chargées l’information peut être perdue.

<a href="/" id="logo">[Le texte de mon logo]</a>
#logo {
   display: block;
   width: 300px;
   height: 100px;
   text‐indent: ‐99999px;
   background: url('images/logo.png');
}

Cette technique est à remplacer par l’utilisation de HTML pur.

Commentaires

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Mises à jour

18/01/2018
Mise à jour de la fiche afin de ne plus recommander la technique des polices d’icônes.

Haut de page