Bénéfice 1 :
Les personnes aveugles, par exemple, ne peuvent pas voir les éléments graphiques et n'ont, par conséquent, pas accès à l'information qu'ils véhiculent. Pour consulter une page Internet, elles utilisent soit un navigateur textuel, soit une aide technique du type lecteur d'écran.
A l'heure actuelle, ces aides techniques interprètent uniquement les données textuelles présentes sur une page. Cela signifie qu'elles ne peuvent pas directement décrire les éléments graphiques.
Les utilisateurs de ces aides techniques n'auront accès à l'information véhiculée par les éléments graphiques que si le concepteur de la page a pris soin de fournir systématiquement une alternative textuelle à l'ensemble des éléments graphiques. C'est précisément le contenu de l'alternative textuelle qui sera restitué à l'utilisateur.
Si aucune alternative textuelle n'est associée aux éléments graphiques, les aides techniques vont néanmoins tenter d'afficher une information pour l'utilisateur. Dans la plupart des cas, c'est le nom de fichier de l'élément graphique qui est affiché, par exemple, "ar_000.jpg". Cette information est dénuée de sens pour l'utilisateur. Il y a perte d'information.
Bénéfice 2 :
Les utilisateurs n'ayant qu'une connexion à faible débit, peuvent être amenés à désactiver l'affichage des éléments graphiques dans leur navigateur afin de gagner du temps lors du chargement de la page. Concrètement, lorsque la page est chargée, aucun élément graphique n'apparaît. Ces utilisateurs deviennent ainsi dépendants du contenu de l'alternative textuelle. C'est donc pour eux le seul moyen d'accéder à l'information véhiculée par les éléments graphiques.
Valeur ajoutée pour le site
Bénéfice 1 :
Le site sera valide selon les spécifications du W3C qui rendent obligatoire la présence de l'attribut alt sur les balises IMG et AREA.
Bénéfice 2 :
Certains moteurs de recherche peuvent référencer le contenu de l'attribut alt des éléments graphiques.
Identifier tous les éléments IMG en faisant une recherche dans le code source.
Vérifier que chaque élément IMG a un attribut alt qui lui est associé.
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.1.
Tous les éléments graphiques de la page s'affichent dans une nouvelle fenêtre avec, en dessous, l'extrait de code source correspondant.
Vérifier que chacun d'eux possède l'attribut alt.
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "Images" de la Barre d'Outils Accessibilité, activer l'option "Liste des images [Nouvelle fenêtre]".
Tous les éléments graphiques de la page s'affichent avec, en dessous, l'extrait de code source correspondant.
Vérifier que chacun d'eux possède l'attribut alt.
Evaluer avec la Barre d'Outils Web Developper pour Firefox (version
1.0.2 en français) :
Dans le menu "Images", activer le sous-menu "Entourer les images" puis l'option "Images sans attribut alt".
Tous les éléments graphiques de la page ne comportant pas d'attribut alt sont entourés d'un liseret rouge.
S'il y a au moins une image 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) :
Lire la page. Il est possible de passer d'élément graphique en élément graphique en tapant sur la touche G du clavier.
Pour chaque image sans commentaire (absence de l'attribut alt), Jaws donnera le nom du fichier image ou l'adresse du lien de la page vers laquelle pointe l'image.
Si l'image possède un attribut alt vide (alt=""), elle sera détectée par Jaws comme étant un élément graphique sans importance et ne sera pas affichée.
Si l'image a une alternative textuelle (alt="alternative textuelle"), celle-ci s'affiche dans la fenêtre représentant l'afficheur braille et est lue par Jaws.
Note :Jaws ne permet pas d'identifier à 100% si l'image a un attribut alt. Par exemple, si Jaws donne le nom du fichier image, cela peut signifier soit que l'attribut alt est absent, soit qu'il est présent et qu'il contient le nom du fichier image. Par conséquent, si vous avez un doute sur le texte donné par Jaws en remplacement d'une image, il est recommandé de compléter l'évaluation du critère en utilisant une vériification par le code source. Par ailleurs, l'ordre d'apparition des éléments graphiques est celui du code source.
La mise en oeuvre de ce critère concerne les concepteurs de site web.
Implémentation
Le seul moyen de fournir une alternative textuelle à un élément graphique est d'utiliser l'attribut alt des balises IMG et AREA.
<img src="fichier_image.jpg" alt="contenu de l'alternative textuelle" />
<area shape="rect" coords="0,0,30,30" href="monlien.html" alt="contenu de l'alternative textuelle" />
Mise en oeuvre à l'aide d'outils d'édition de page web
avec FrontPage : Le commentaire se place dans l'emplacement "Texte" de la boîte de dialogue "propriétés de l'image" (cliquer sur l'image avec le bouton
droit pour la trouver).
avec Dreamweaver : Dans le champ "sec" (comme "secondaire") dans la fenêtre des propriétés, pour mettre un alt="" mettez "vide"
avec WebExpert : Dans la boîte de dialogue "Insérer une image graphique", placer le commentaire dans la case "Alternative".
avec HotMetal Pro : Lors de l'insertion de l'image, placer le commentaire dans la case "Alternate Text" de la boîte de dialogue "Image Properties". Cette
boîte de dialogue peut être retrouvée par la suite en cliquant sur l'image avec le bouton droit (en mode "TagsOn" ou "WYSIWYG").
avec N-View : utilisez l'option "texte alternatif" du menu "images".
Exemple de mauvaise pratique
L'élément graphique suivant ne comporte pas d'alternative textuelle (l'attribut alt est absent).
<img src="spacer.gif" />
Exemple de bonne pratique
L'élément graphique suivant contient 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.3 : Les éléments graphiques destinés à la décoration sont-ils commentés par ALT="" ?
Fiche 1.5 : Les commentaires associés à chacune des zones réactives d'une image map sont-ils pertinents ?
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 ?
Fiche 11.6 : Dans un formulaire, le commentaire du bouton SUBMIT est-il pertinent ?