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 dans le code HTML (via les balises <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.