Retour à la page d'accueil L'atelier

  

N°CD-027 - Chaque image est dotée d'une alternative textuelle appropriée - Niveau 1 - Rubrique : Alternatives - Sous-rubrique : Alternatives

Noter :
  • (Moyenne : 3.25, 4 votants)

  

Objectifs

  • Permettre la navigation et la consultation pour les utilisateurs placés dans des contextes où les images ne sont pas perceptibles (navigateurs texte, lecteur d'écran, images désactivées)
  • Permettre aux robots d'exploiter l'information véhiculée par les images (référencement, traduction automatique)
  • Permettre l'affichage d'un texte pendant la chargement des images

Mise en Oeuvre

L'attribut alt est présent pour chaque élément <img>, sous la forme :
  • alt="" pour les images qui ne véhiculent pas d'information nécessaire à la compréhension du texte. Exemple de code : <img src="spacer.gif" height="1" width="1" alt="">. Attention : l'omission de l'attribut alt n'est pas l'équivalent d'un attribut vide et n'est pas acceptable. ;
  • alt="_fonction_" pour les images liens, avec comme contenu (_fonction_) la fonction du lien : <img src="..." alt="Accueil"> pour la traditionnelle icône "home" ;
  • alt="_description_" pour les images dont la perception est nécessaire à la compréhension du contenu.

La description de l'image ou de sa fonction doit être concise. Aucune limite de longueur normative n'existe, mais 120 caractères serait un maximum indicatif. Le seuil limite d'une alternative textuelle n'est pas tant sa longueur que la complexité de l'information : si cette dernière nécessite d'être structurée (à l'aide d'éléments de tableaux, de listes, de titres, de paragraphes, etc.), il ne s'agit plus de la fournir sous la forme d'une alternative textuelle simple, mais de donner une description étendue de l'image. Celle-ci prend la forme d'un contenu textuel structuré, présent dans la même page que l'image ou dans une page immédiatement accessible à partir de celle-ci. 

Vérification

Tester avec un validateur d'accessibilité :
http://www.ocawa.com/auditez.htm
et un navigateur textuel ou un simulateur :
http://lynx.browser.org/
http://www.delorie.com/web/lynxview.html


Liens

Tags

Technique, Contenus, Référencement, Accessibilité

Cette bonne pratique a été vérouillée par les modérateurs.

Voir les 31 commentaires archivés

  
Il n'y a aucun commentaire associé à cette bonne pratique.