Bénéfice 1 :
Les textes sous forme d'image ne sont pas accessibles aux personnes aveugles ni aux utilisateurs n'ayant qu'un accès Internet à faible débit et qui désactivent le chargement des images. Il est donc important de donner à ces utilisateurs un autre moyen d'accéder à l'information véhiculée par le texte mis en image.
Bénéfice 2 :
Ces textes peuvent également s'avérer difficilement lisibles pour les personnes malvoyantes ou lisant à partir d'un écran de petite taille (police trop sophistiquée, contraste de couleurs insuffisant entre le fond et le texte), à plus forte raison si l'image n'est pas redimensionnable.
Si le texte contenu dans l'image constitue une information, il est indispensable de fournir à l'utilisateur un accès à cette information par l'intermédiaire d'une alternative textuelle équivalente, c'est-à-dire, transcrivant la nature du message porté par le texte.
Valeur ajoutée pour le site
Bénéfice 1 :
Le site sera conforme aux spécifications du W3C selon lesquelles l'attribut alt est obligatoire sur les balises IMG et AREA SHAPE.
Bénéfice 2 :
Certains moteurs de recherche peuvent référencer le contenu de l'attribut alt des images.
La méthode d'évaluation est une lecture du code et de l'attribut alt afin de vérifier si le contenu de l'attribut alt est en corrélation avec l'image.
Par l'utilisation d'outils
Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.
Evaluer avec la barre AccessiWeb (version 1.0) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "1. Eléments graphiques" de la Barre AccessiWeb, activer le critère 1.8.
Tous les éléments graphiques de la page s'affichent dans une nouvelle fenêtre avec, en dessous, l'extrait de code source correspondant.
Pour toutes les images comportant du texte, vérifier que son alternative textuelle reprend intégralement ce texte (contenu de l'attribut alt).
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Cliquer sur l'option "Liste des images [Nouvelle fenêtre]" du menu "Images".
Une nouvelle fenêtre apparaît et affiche l'image et son commentaire associé.
Pour toutes les images comportant du texte, vérifier que le commentaire associé reprend intégralement ce texte.
Evaluer avec la Barre d'Outils Web Developper pour Firefox (version
1.0.2 en français) :
Activer l'option "Afficher les attributs alt" du menu "Images".
Les alternatives textuelles (attributs alt) et leur contenu sont affichés directement dans la page à proximité des images dans un encadré de fond jaune.
Pour toutes les images comportant du texte, vérifier que le commentaire associé reprend intégralement ce texte.
Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Ce critère n'est pas évaluable par le lecteur d'écran Jaws.
La mise en oeuvre de ce critère concerne les rédacteurs.
Implémentation
L'implémentation se fait par l'utilisation de l'attribut alt sur l'image :
<img src="prix.gif" alt="20 Euros" />
Dans le cas d'une description plus complexe et dépassant le nombre de caractères limite (moins de 60 caractères pour un attribut alt), l'utilisation de l'attribut longdesc
s'avère nécessaire :
<img src="billet" longdesc="desc/fiche2223.html" alt="fiche descriptive de l'article numéro 2223" />
Exemple de mauvaise pratique
Exemple d'une image présentant le texte "go" sur un formulaire de recherche.
<img src="/home/img/ok.gif" />
Exemple de bonne pratique
En reprenant l'exemple précédent et en rendant le commentaire explicite, on peut écrire :