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 ?
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.
Replacer leur contenu dans le contexte des éléments graphiques auxquels ils se rapportent.
Vérifier que le texte contenu dans un attribut alt correspond à l'information véhiculée par l'élément graphique.
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.2.
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, comparer le contenu de l'alternative textuelle (contenu de l'attribut alt) avec son contexte dans la page, et déterminer s'il est approprié.
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Activer 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, comparer le contenu de l'alternative textuelle avec son contexte dans la page, et déterminer s'il est approprié.
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 chaque image, comparer le contenu de l'alternative textuelle avec son contexte dans la page, et déterminer s'il est approprié.
Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Afficher la page à évaluer et passer d'élément graphique en élément graphique ayant une alternative textuelle, en tapant sur la touche G. Note : l'ordre d'apparition des éléments graphiques est celui du code source.
Le contenu de l'alternative textuelle s'affiche alors dans la fenêtre représentant l'afficheur Braille et est lu par Jaws.
Comparer ce contenu avec le contexte de l'élément Graphique dans la page et déterminer s'il est approprié.
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
On ne peut choisir l'alternative d'une image sans en considérer son contexte car
Une image pourra passer de catégorie décorative à illustrative ou fonctionnelle selon le contexte,
Une image pourra éventuellement comporter une alternative textuelle vide si l'information de description est présente directement avant ou après l'image.
Exemple de mauvaise pratique
Si l'élément graphique est destiné à la décoration ou à la mise en page, il ne faut pas tenter de le décrire :
<img src="'space.gif" alt="spacer" />
Si l'élément graphique sert à illustrer le texte (photo accompagnant un article de journal, pictogramme...), le contenu de l'alternative textuelle ne doit
pas être une description narrative :
<img src="fauteuil.gif" alt="fauteuil roulant stylisé en blanc sur fond bleu" />
Si l'élément graphique est un lien, l'alternative textuelle ne doit pas être une
description de l'image ou un symbole visuel :
Si l'élément graphique est destiné à la décoration ou à la mise en page, il faut lui
associer une alternative textuelle nulle :
<img src="'space.gif" alt="" />
Si l'élément graphique sert à illustrer le texte (photo accompagnant un article de
journal, pictogramme...), le contenu de l'alternative textuelle doit décrire l'information
véhiculée :
<img src="fauteuil.gif" alt="accès réservé aux handicapés" />
Si l'élément graphique est un lien, le contenu de l'alternative textuelle doit indiquer
à l'utilisateur la destination du lien. Ici, c'est la fonction de l'élément graphique qui
doit être restituée et non sa description :
Si cette image est décorative, mettez comme alternative textuelle alt="",
Si cette image est illustrative, mettez comme alternetive textuelle alt="logo AccessiWeb",
Si cette image est une image lien, mettez comme alternative textuelle alt="fonction du lien".