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 />
.
L’usage de sprites (images chargées en arrière-plan via CSS) n’est donc pas autorisé pour les images porteuses d’informations.
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 :
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.