Partager

Approfondir

Qualité Web le livre

Livre Qualité Web

Acheter

1 - Chaque image est dotée d'une alternative textuelle appropriée.

Thématique
Phase Projet

Objectif

Permettre aux utilisateurs placés dans des contextes où les images ne sont pas perceptibles (navigateur texte, lecteur d'écran, navigateur avec images désactivées) de comprendre le sens des images qu'ils ne peuvent voir.

Permettre aux robots d'exploiter l'information véhiculée par les images (référencement, indexation, traduction automatique des alternatives d'images-texte).

Permettre l'affichage d'un texte pendant le chargement des images.

Mise en œuvre

L'attribut alt est présent pour chaque élément img (ou area dans le cas des zones d'images MAP) sous la forme :

  • alt="" (alt vide) pour les images qui ne véhiculent pas d'information nécessaire à la compréhension du texte. Par exemple : <img src="spacer.gif" height="1" width="1" alt="">. Attention : l'omission de l'attribut alt ou un attribut alt contenant simplement un espace ne correspond pas à un attribut vide et ne sera donc pas conforme ;
  • alt="_fonction_" pour les images liens, avec comme contenu la fonction du lien. Par exemple : <img src="…" alt="Accueil"> pour la traditionnelle icône « home » ;
  • alt="_description_" pour les images dont la description est nécessaire à la compréhension du contenu de la page.

Contenu de l'alternative

Le contenu de l'alternative dépend étroitement de la fonction de l'image et du contexte précis dans lequel elle est employée.

Cas fréquents

Les images-liens ne doivent jamais avoir d'alternative vide. Leur alternative indiquera la cible du lien plutôt que la description de l'image proprement dite.

Les images-texte reprendront le plus souvent le texte concerné dans leur alternative, éventuellement résumé pour rendre cette dernière plus concise.

Les images complexes véhiculant une information trop importante pour être fournie par la seule alternative textuelle : l'alternative s'en tiendra à un résumé de l'essentiel, et une description étendue accompagnera l'image, dans la même page que celle-ci ou accessible à partir du contexte de l'image.

Les images nécessitant une mention de copyright : contrairement à une pratique fréquente, l'alternative ne doit en aucun cas servir à faire mention des droits d'auteur ou de propriété intellectuelle.

Longueur de l'alternative

La description de sa fonction ou de l'information véhiculée par l'image doit être concise. Il n'y a pas de limite normée mais on admet généralement 120  caractères comme maximum.

Contrôle

Cette vérification s'effectue en large partie via l'inspection du code ou son examen à l'aide d'outils du type Web Developer Toolbar pour Firefox :

  • Tester au préalable la présence des attributs alt en vérifiant la validité du code HTML4.x ou XHTML1.x avec le validateur du W3C (cet attribut étant obligatoire dans ces formats, le validateur HTML signale les images privées d'alternative) ;
  • Vérifier manuellement la pertinence de chaque alternative en l'affichant par exemple à l'aide d'une barre d'outils d'inspection du code comme la Web Developer Toolbar pour Firefox ;
  • Vérifier également la présence et la pertinence des alternatives des images générées via Javascript, et donc absentes du code HTML statique. De même, s'assurer de la pertinence des alternatives d'images dynamiquement modifiées par Javascript (images reflétant l'état d'une interaction AJAX, par exemple).

Découvrez la certification Opquast

Rejoignez la communauté des certifiés Opquast. Plus de 5000 professionnels formés à la qualité Web. Au programme une formation en ligne de 14h, un examen de 1h30, un badge et un score à mettre sur votre cv et votre profil linkedin.

Commander en ligne