retour vers le site AccessiWeb

Guide AccessiWeb


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

Fiche 1.4 : Pour chacune des images de la page, les textes dans l'attribut ALT font-ils moins de 60 caractères ?

Carte d'identité

  • Critère AccessiWeb : 1.4
  • 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. Copier/coller le contenu de l'attribut alt dans un éditeur de texte.
  2. Compter le nombre de caractères (espaces et ponctuations compris).
  3. Le nombre de caractères ne doit pas dépasser 60 caractères.
    Note : pour un comptage exact, positionner le curseur avant le dernier caractère et relever la valeur du nombre de colonnes. En effet, certains éditeurs affichent le numéro de colonnes correspondant à l'emplacement du curseur.

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.4.
  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. Repérer les alternatives textuelles d'une longueur "suspecte" (contenu de l'attribut alt contient plus de 5 à 6 mots).
  5. Puis copier/coller le contenu de l'attribut alt dans un éditeur de texte et compter le nombre de caractères (espaces et ponctuations compris). Le nombre de caractères ne doit pas dépasser 60 caractères.
    Note : pour un comptage exact, positionner le curseur avant le dernier caractère et relever la valeur du nombre de colonnes. En effet, certains éditeurs affichent le numéro de colonnes correspondant à l'emplacement du curseur.

Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
  1. Afficher la liste des images en cliquant sur l'option "Liste des images [Nouvelle fenêtre]" du menu "Images".
  2. Repérer les alternatives textuelles d'une longueur "suspecte" (plus de 5 à 6 mots).
  3. Puis copier/coller le contenu de l'attribut alt dans un éditeur de texte et compter le nombre de caractères (espaces et ponctuations compris).
  4. Le nombre de caractères ne doit pas dépasser 60 caractères.
    Note : pour un comptage exact, positionner le curseur avant le dernier caractère et relever la valeur du nombre de colonnes. En effet, certains éditeurs affichent le numéro de colonnes correspondant à l'emplacement du curseur.

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. Repérer les alternatives textuelles d'une longueur "suspecte" (plus de 5 à 6 mots).
  4. Puis copier/coller le contenu de l'attribut alt dans un éditeur de texte et compter le nombre de caractères (espaces et ponctuations compris).
  5. Le nombre de caractères ne doit pas dépasser 60 caractères.
    Note : pour un comptage exact, positionner le curseur avant le dernier caractère et relever la valeur du nombre de colonnes. En effet, certains éditeurs affichent le numéro de colonnes correspondant à l'emplacement du curseur.

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

Rédiger des alternatives textuelles de 5 à 6 mots maximum, espaces et accents compris.
Toute alternative textuelle dépassant 5 à 6 mots en moyenne peut être considérée comme "suspecte" et doit faire l'objet d'un comptage précis du nombre de caractères.
Ce critère s'applique aux éléments graphiques qui ne sont pas des lien mais sont porteurs d'une information à laquelle tout utilisateur doit pouvoir avoir accès. Au moment d'insérer un élément graphique sur une page, il est primordial de s'interroger sur sa fonction et de distinguer entre les éléments décoratifs ou de mise en page, les éléments porteurs d'une information et, dans ce cas, est-il un lien ou non ?

Exemple de mauvaise pratique

Imaginons le site d'un guide touristique qui utilise un jeu de pictogrammes pour identifier et signaler aux visiteurs certaines caractéristiques des lieux décrits.
Par exemple, pour signaler que le lieu est accessible aux personnes handicapées, la page comporte le logo du fauteuil roulant stylisé en blanc sur fond bleu.
Ce pictogramme apporte bien une information à laquelle tout utilisateur doit avoir accès. Cependant, il n'est pas nécessaire de décrire avec précision ce qu'il représente et la manière dont il est dessiné. Ce qui importe est l'information qu'il véhicule.
On évitera donc une alternative textuelle du type :

<img src="fauteuil.gif" alt="logo d'un fauteuil roulant stylisé en blanc sur fond bleu indiquant que le lieu est accessible aux personnes handicapées" />

Exemple de bonne pratique

Dans l'exemple précédent, écrire de préférence :

<img src="fauteuil.gif" alt="accessible aux personnes handicapées" />

revenir en haut de la page

Illustrations

Il n'y a pas d'illustration pour cette fiche.

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.3 Fiche suivante : fiche 1.5

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