Utilité de l'attribut alt· Utilisation de l'attribut alt· En savoir plus·

Liens connexes

Index des conseils· Page d'accueil QA· QA IG· Validation· QA-dev·

Utilisez l'attribut alt

2005-04-25 : Cette page est la traduction française par Patrick Blanchenay du document intitulé Use the alt attribut disponible à l'adresse : http://www.w3.org/QA/Tips/altAttribute. Même si le document original n'a pas valeur normative, il reste la seule référence, notamment parce qu'il est susceptible d'évoluer. Par ailleurs, des erreurs de traduction ont pu survenir.

À quoi servent les attributs alt ?

L'attribut alt  est défini pour un ensemble de balises (notamment pour img, area et optionnellement pour input et applet) ; il vous permet de fournir un équivalent texte à un objet.

Un équivalent texte offrent à votre site et ses visiteurs certains avantages dans des situations courantes :

• De nos jours, des navigateurs Web sont disponibles sur une grande variété de systèmes d'exploitation et offrent des possibilités très inégales ; certains ne peuvent pas du tout afficher d'images ou n'en afficher qu'un certain type ; certains peuvent être configurés pour ne pas charger les images. Si vous avez utilisé l'attribut  alt dans votre code, la plupart de ces navigateurs afficheront les descriptions que vous avez données à la place des images correspondantes.
• Certains de vos visiteurs ne peuvent pas voir les images, qu'ils soient aveugles, daltonien ou déficient visuel ; l'attribut alt est d'un grand secours pour ces personnes car elles peuvent s'en servir pour se faire une bonne idée de ce qu'il y a sur votre page.
• Les robots des moteurs de recherche appartiennent à ces deux catégories : si vous voulez que votre site soit indexé comme il le mérite, l'attribut alt permet de vous assurer qu'ils ne rateront des parties importantes de vos pages.

Que dois-je mettre dans l'attribut alt ?

Pour remplir l'attribut alt, la règle générale consiste à 'utiliser un texte qui remplit la même fonction que l'image.

Plus précisément :

• Si l'image est simplement un texte décoratif, mettez le texte dans l'attribut  alt.
  
• Si l'image sert à créer des puces dans un liste, ou une ligne horizontale, ou une autre décoration similaire, vous pouvez laisser l'attribut alt vide (c'est-à-dire alt=""), mais il vaut mieux utiliser des choses telles que list-style-image du CSS
• Si l'image offre une quantité importante d'information, essayez de la résumer en une courte phrase pour l'attribut alt et renvoyez grâce à un lien longdesc vers une explication plus détaillée.

En savoir plus

• Directives pour l'accessibilité aux contenus Web ( Web Content Accessibility Guidelines) et la section spécifique sur le contenu alternatif (specific section on alternate content)
• Techniques fondamentales, section 2 sur les équivalents textuels (Core Techniques, section 2 Text equivalents)
• Des extraits du Manuel d'enregistrement de l'Association nationale Braille (Excerpts from the National Braille Association Tape Recording Manual, Third Edition) donnent des conseils sur la façon de rédiger des descriptions de cartes, de graphiques et autres images contenant beaucoup d'information.
• HTML 4.01 (HTML 4.01) et en particulier la section sur l'attribut alt (specific section on the alt attribute)
• Fournir des équivalents textuels aux images (Providing text equivalents for images) et Ignorer les images de placement (Ignoring spacer images) de la série Plongez dans l'accessibilité (Dive Into Accessibility)