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.

1 commentaire

  • Par Laurent Bracquart, le 18 janvier 2018 à 17h37.

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

    Répondre

Ajouter un commentaire

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

Haut de page