# 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 ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### 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

- Bénéfice 1 :
  L'alternative textuelle associée à un élément graphique est la seule information restituée à l'utilisateur lorsqu'il désactive le chargement des images. Cette alternative textuelle doit décrire uniquement et de manière concise la même information que celle véhiculée par l'élément graphique (pour une description longue consulter les fiches 1.10 et 1.11).
  Pour l'utilisateur utilisant un logiciel de grossissement et le navigateur Internet Explorer, cette alternative textuelle s'affiche dans une info-bulle au passage de la souris. Du fait que cette alternative textuelle est limitée à 60 caractères, elle pourra s'afficher sur un seul écran, même avec un fort grossissement.
- Bénéfice 2 :
  Pour l'utilisateur utilisant un afficheur Braille de 60 ou 80 caractères, cette alternative textuelle limitée à 60 caractères s'affiche sur une seule ligne.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Tout élément textuel est repéré par les moteurs de recherche. Par conséquent, tout élément graphique possédant une alternative textuelle sera mieux référencé.

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

- Fiche 1.1 : Chaque élément graphique possède-t-il une alternative textuelle ?
- Fiche 1.3 : Les éléments graphiques destinés à la décoration sont-ils commentés par ALT="" ?
- Fiche 1.5 : Les commentaires associés à chacune des zones réactives d'une image map sont-ils pertinents ?
- Fiche 1.8 : Pour chacune des images texte de la page, le contenu de son alternative est-il au moins équivalent au texte inscrit dans l'image ?
- Fiche 1.10 : Quand une image nécessite une description détaillée, un commentaire texte lui est-il associé ?
- Fiche 1.12 : Pour chacune des images liens, le texte contenu dans l'attribut ALT donne-t-il la fonction du lien ?
- Fiche 6.1 : L'intitulé des liens fait-il moins de 80 caractères ?

#### Autres ressources

- html Techniques (section 7.1) : Short text equivalents for images ("alt-text")
- Les images accessibles sur le site openweb
- la-grange.net : Fournir des équivalents texte pour les images
- A. J. Flavell : ALT texts in IMG
- Jukka Korpela : Simple guidelines on using ALT texts in IMG elements
- Ian Hickson : Mini-FAQ about the alternate text of images
- webaim.org : Creating accessible images
- Martin Schrode : On accessible advertising

revenir au sommaire de la fiche

revenir en haut de la page

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