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

Il est recommandé de ne pas utiliser CSS pour afficher les images porteuses d’informations.

En d’autres termes, chaque fois qu’une image apporte de l’information, il est recommandé de l’intégrer 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) est donc fortement déconseillé 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 servant de liens ou de 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 est fortement déconseillé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: ‐99999rem;
   background: url('images/logo.png');
}

Il est fortement conseillé de remplacer cette technique par l’utilisation de HTML pur.

Commentaires

Ajouter un commentaire

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

Haut de page