retour vers le site AccessiWeb

Guide AccessiWeb


vous êtes ici : Accueil > Fiches AccessiWeb : Eléments graphiques > Fiche 1.1

Fiche 1.1 : Chaque élément graphique possède-t-il une alternative textuelle ?

Carte d'identité

  • Critère AccessiWeb : 1.1
  • Niveau AccessiWeb : bronze
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 1 de WAI) : 1.1

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

revenir en haut de la page

Comment évaluer

Par le code source

  1. Identifier tous les éléments IMG en faisant une recherche dans le code source.
  2. 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) :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "1. Eléments graphiques" de la Barre AccessiWeb, activer le critère 1.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.
  4. 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) :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Images" de la Barre d'Outils Accessibilité, activer l'option "Liste des images [Nouvelle fenêtre]".
  3. Tous les éléments graphiques de la page s'affichent avec, en dessous, l'extrait de code source correspondant.
  4. 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) :
  1. Dans le menu "Images", activer le sous-menu "Entourer les images" puis l'option "Images sans attribut alt".
  2. Tous les éléments graphiques de la page ne comportant pas d'attribut alt sont entourés d'un liseret rouge.
  3. 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) :
  1. Lire la page. Il est possible de passer d'élément graphique en élément graphique en tapant sur la touche G du clavier.
  2. 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.
  3. 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.
  4. 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.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

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

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.

<img src="couple.jpg" alt="couple" />

revenir en haut de la page

Illustrations

alternatives textuelles visibles avec images non chargées

Cette copie d'écran montre les alternatives textuelles associées aux éléments graphiques lorsque ceux-ci ne sont pas chargés par le navigateur.

vue sous Lynx : images sans alternative textuelle

Cette copie d'écran montre la façon dont le navigateur Lynx restitue des images ne comportant pas d'alternative textuelle.

revenir en haut de la page

Références

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche suivante : fiche 1.2

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact