Bénéfice 1 :
Certains éléments graphiques n'ont pas de valeur informative. C'est souvent le cas des pixels transparents qui servent uniquement à la mise en page. Or, tout élément graphique doit impérativement être commenté. Donc, les éléments graphiques servant à la mise en page doivent être commentés par une alternative textuelle nulle (En HTML, alt=""). Ceci permet notamment, aux personnes aveugles de lire la page avec une plus grande fluidité puisque les éléments graphique dotés d'une alternative textuelle nulle seront ignorés par un lecteur d'écran.
Bénéfice 2 :
Cela permet également d'éviter, dans le cas d'un lien englobant à la fois du texte et un élément graphique, de décrire l'élément graphique dont l'alternative textuelle serait redondante avec le texte contenu dans le lien.
Valeur ajoutée pour le site
Bénéfice 1 :
Associer une alternative nulle à un élément de décoration ou mise en page, plutôt qu'un texte sans réelle valeur, permet d'alléger le poids de la page.
Identifier tous les éléments IMG en faisant une recherche dans le code source.
Identifier tous les éléments IMG qui servent à la décoration.
Pour chaque élément IMG servant à la décoration vérifier que l'attribut alt qui lui est associé a la valeur nulle (alt="").
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.3.
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 chaque élément graphique destiné à la décoration, vérifier que le contenu de l'alternative textuelle est égal à alt="".
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Méthode 1 :
Cliquer sur l'option "Liste des images [Nouvelle fenêtre]" du menu "Images".
Une nouvelle fenêtre s'affiche et liste l'ensemble des éléments graphiques avec leur alternative textuelle associée et l'extrait de code correspondant.
Pour chaque élément graphique, déterminer s'il s'agit d'un élément de décoration ou de mise en page, et vérifier que le contenu de l'alternative textuelle est égal à ALT="".
Méthode 2 :
Cliquer sur l'option "Montrer les images" du menu "Images".
Tous les éléments graphiques de la page sont entourés d'un liseré de couleur et précédés de leur alternative textuelle.
Vérifier que tous les éléments graphiques destinés à la décoration ou à la mise en page sont bien commentés par ALT="".
Evaluer avec la Barre d'Outils Web Developper pour Firefox (version
1.0.2 en français) :
Repérer sur la page, les images destinées à la décoration.
Dans le menu "Images", activer le sous-menu "Entourer les images" puis l'option "Images avec attribut alt vide".
Vérifier que les images destinées à la décoration sont entourés d'un liseret rouge (alt="").
S'il y a au moins une image destinée à la décoration qui n'est pas entourée d'un liseret rouge, le critère n'est pas validé.
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
Il convient de remplir l'attribut alt par une valeur vide :
<img="spacer.gif" alt="" />
Dans le cas d'une image englobée dans un lien :
<a href="cannes.html"><img="savoirplus.gif" alt="" />En savoir plus sur le festival de Canne</a>
Cette copie d'écran montre un bon exemple d'alternative textuelle donnée à une image lien (l'alternative textuelle est "Retour vers la page d'accueil").
Cette copie d'écran montre des mauvais exemples d'alternatives textuelles données à des éléments graphiques destinés à la mise en page et qui sont commentés inutilement par "spacer", "hautmin2_r1_c5", etc.
Fiche 1.1 : Chaque élément graphique possède-t-il une alternative textuelle ?
Fiche 1.2 : Pour chacune des images de la page ayant une alternative, les textes dans l'attribut ALT sont-ils appropriés par rapport au contexte dans lequel l'image se trouve ?
Fiche 1.8 : Pour chacune des images texte de la page, le contenu de son alternative est-il au moins équivalent au texte inscrit dans l'image ?
Fiche 1.12 : Pour chacune des images liens, le texte contenu dans l'attribut ALT donne-t-il la fonction du lien ?