Bénéfice 1 :
L'alternative textuelle associée à un élément graphique est la seule information restituée à l'utilisateur lorsqu'il désactive le chargement des images. Cette alternative textuelle doit décrire uniquement et de manière concise la même information que celle véhiculée par l'élément graphique (pour une description longue consulter les fiches 1.10 et 1.11).
Pour l'utilisateur utilisant un logiciel de grossissement et le navigateur Internet Explorer, cette alternative textuelle s'affiche dans une info-bulle au passage de la souris. Du fait que cette alternative textuelle est limitée à 60 caractères, elle pourra s'afficher sur un seul écran, même avec un fort grossissement.
Bénéfice 2 :
Pour l'utilisateur utilisant un afficheur Braille de 60 ou 80 caractères, cette alternative textuelle limitée à 60 caractères s'affiche sur une seule ligne.
Valeur ajoutée pour le site
Bénéfice 1 :
Tout élément textuel est repéré par les moteurs de recherche. Par conséquent, tout élément graphique possédant une alternative textuelle sera mieux référencé.
Copier/coller le contenu de l'attribut alt dans un éditeur de texte.
Compter le nombre de caractères (espaces et ponctuations compris).
Le nombre de caractères ne doit pas dépasser 60 caractères. Note : pour un comptage exact, positionner le curseur avant le dernier caractère et relever la valeur du nombre de colonnes. En effet, certains éditeurs affichent le numéro de colonnes correspondant à l'emplacement du curseur.
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.4.
Tous les éléments graphiques de la page s'affichent dans une nouvelle fenêtre avec, en dessous, l'extrait de code source correspondant.
Repérer les alternatives textuelles d'une longueur "suspecte" (contenu de l'attribut alt contient plus de 5 à 6 mots).
Puis copier/coller le contenu de l'attribut alt dans un éditeur de texte et compter le nombre de caractères (espaces et ponctuations compris). Le nombre de caractères ne doit pas dépasser 60 caractères. Note : pour un comptage exact, positionner le curseur avant le dernier caractère et relever la valeur du nombre de colonnes. En effet, certains éditeurs affichent le numéro de colonnes correspondant à l'emplacement du curseur.
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Afficher la liste des images en cliquant sur l'option "Liste des images [Nouvelle fenêtre]" du menu "Images".
Repérer les alternatives textuelles d'une longueur "suspecte" (plus de 5 à 6 mots).
Puis copier/coller le contenu de l'attribut alt dans un éditeur de texte et compter le nombre de caractères (espaces et ponctuations compris).
Le nombre de caractères ne doit pas dépasser 60 caractères. Note : pour un comptage exact, positionner le curseur avant le dernier caractère et relever la valeur du nombre de colonnes. En effet, certains éditeurs affichent le numéro de colonnes correspondant à l'emplacement du curseur.
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.
Repérer les alternatives textuelles d'une longueur "suspecte" (plus de 5 à 6 mots).
Puis copier/coller le contenu de l'attribut alt dans un éditeur de texte et compter le nombre de caractères (espaces et ponctuations compris).
Le nombre de caractères ne doit pas dépasser 60 caractères. Note : pour un comptage exact, positionner le curseur avant le dernier caractère et relever la valeur du nombre de colonnes. En effet, certains éditeurs affichent le numéro de colonnes correspondant à l'emplacement du curseur.
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.
Les personnes en charge du contenu, en concertation avec les graphistes, doivent déterminer
la valeur informative, illustrative ou décorative de chaque élément graphique afin de
choisir l'alternative textuelle qui leur sera associée.
Implémentation
Rédiger des alternatives textuelles de 5 à 6 mots maximum, espaces et accents compris.
Toute alternative textuelle dépassant 5 à 6 mots en moyenne peut être considérée comme "suspecte" et doit faire l'objet d'un comptage précis du nombre de caractères.
Ce critère s'applique aux éléments graphiques qui ne sont pas des lien mais sont porteurs d'une information à laquelle tout utilisateur doit pouvoir avoir accès. Au moment d'insérer un élément graphique sur une page, il est primordial de s'interroger sur sa fonction et de distinguer entre les éléments décoratifs ou de mise en page, les éléments porteurs d'une information et, dans ce cas, est-il un lien ou non ?
Exemple de mauvaise pratique
Imaginons le site d'un guide touristique qui utilise un jeu de pictogrammes pour identifier et signaler aux visiteurs certaines caractéristiques des lieux décrits.
Par exemple, pour signaler que le lieu est accessible aux personnes handicapées, la page comporte le logo du fauteuil roulant stylisé en blanc sur fond bleu.
Ce pictogramme apporte bien une information à laquelle tout utilisateur doit avoir accès.
Cependant, il n'est pas nécessaire de décrire avec précision ce qu'il représente et la manière dont il est dessiné. Ce qui importe est l'information qu'il véhicule.
On évitera donc une alternative textuelle du type :
<img src="fauteuil.gif" alt="logo d'un fauteuil roulant stylisé en blanc sur fond bleu indiquant que le lieu est accessible aux personnes handicapées" />
Exemple de bonne pratique
Dans l'exemple précédent, écrire de préférence :
<img src="fauteuil.gif" alt="accessible aux personnes handicapées" />