retour vers le site AccessiWeb

Guide AccessiWeb


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

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 ?

Carte d'identité

  • Critère AccessiWeb : 1.2
  • 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. Rechercher les attributs alt.
  2. Replacer leur contenu dans le contexte des éléments graphiques auxquels ils se rapportent.
  3. 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) :
  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.2.
  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. 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) :
  1. Activer l'option "Liste des images [Nouvelle fenêtre]" du menu "Images".
  2. 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.
  3. 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) :
  1. Activer l'option "Afficher les attributs alt" du menu "Images".
  2. Les alternatives textuelles (attributs alt) et leur contenu sont affichés directement dans la page à proximité des images dans un encadré de fond jaune.
  3. 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) :
  1. 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.
  2. Le contenu de l'alternative textuelle s'affiche alors dans la fenêtre représentant l'afficheur Braille et est lu par Jaws.
  3. Comparer ce contenu avec le contexte de l'élément Graphique dans la page et déterminer s'il est approprié.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

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

  1. Une image pourra passer de catégorie décorative à illustrative ou fonctionnelle selon le contexte,
  2. 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

Exemple de bonne pratique

revenir en haut de la page

Illustrations

logo AccessiWeb

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".

revenir en haut de la page

Références

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 1.1 Fiche suivante : fiche 1.3

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