retour vers le site AccessiWeb

Guide AccessiWeb


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

Fiche 1.3 : Les éléments graphiques destinés à la décoration sont-ils commentés par ALT="" ?

Carte d'identité

  • Critère AccessiWeb : 1.3
  • 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. Identifier tous les éléments IMG qui servent à la décoration.
  3. 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) :
  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.3.
  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 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 :
  1. Cliquer sur 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, 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 :
  1. Cliquer sur l'option "Montrer les images" du menu "Images".
  2. 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.
  3. 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) :
  1. Repérer sur la page, les images destinées à la décoration.
  2. Dans le menu "Images", activer le sous-menu "Entourer les images" puis l'option "Images avec attribut alt vide".
  3. Vérifier que les images destinées à la décoration sont entourés d'un liseret rouge (alt="").
  4. 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.

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

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>

Exemple de mauvaise pratique

Pixel transparent commenté par "spacer" :

<img="spacer.gif" alt="spacer" />

Exemple de bonne pratique

Pixel transparent non commenté :

<img="spacer.gif" alt="" />

revenir en haut de la page

Illustrations

images illustratives commentées

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

images de mise en page commentées

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.

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.2 Fiche suivante : fiche 1.4

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