# Guide AccessiWeb

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

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

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.8
- 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 :
  Les textes sous forme d'image ne sont pas accessibles aux personnes aveugles ni aux utilisateurs n'ayant qu'un accès Internet à faible débit et qui désactivent le chargement des images. Il est donc important de donner à ces utilisateurs un autre moyen d'accéder à l'information véhiculée par le texte mis en image.
- Bénéfice 2 :
  Ces textes peuvent également s'avérer difficilement lisibles pour les personnes malvoyantes ou lisant à partir d'un écran de petite taille (police trop sophistiquée, contraste de couleurs insuffisant entre le fond et le texte), à plus forte raison si l'image n'est pas redimensionnable.
  Si le texte contenu dans l'image constitue une information, il est indispensable de fournir à l'utilisateur un accès à cette information par l'intermédiaire d'une alternative textuelle équivalente, c'est-à-dire, transcrivant la nature du message porté par le texte.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Le site sera conforme aux spécifications du W3C selon lesquelles l'attribut `alt` est obligatoire sur les balises `IMG` et `AREA SHAPE`.
- Bénéfice 2 :
  Certains moteurs de recherche peuvent référencer le contenu de l'attribut `alt` des images.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. La méthode d'évaluation est une lecture du code et de l'attribut `alt` afin de vérifier si le contenu de l'attribut `alt` est en corrélation avec l'image.

#### 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.8.
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 toutes les images comportant du texte, vérifier que son alternative textuelle reprend intégralement ce texte (contenu de l'attribut `alt`).

##### Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :

1. Cliquer sur l'option "Liste des images [Nouvelle fenêtre]" du menu "Images".
2. Une nouvelle fenêtre apparaît et affiche l'image et son commentaire associé.
3. Pour toutes les images comportant du texte, vérifier que le commentaire associé reprend intégralement ce texte.

##### 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 toutes les images comportant du texte, vérifier que le commentaire associé reprend intégralement ce texte.

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

La mise en oeuvre de ce critère concerne les rédacteurs.

#### Implémentation

L'implémentation se fait par l'utilisation de l'attribut `alt` sur l'image :

<img src="prix.gif" alt="20 Euros" />

Dans le cas d'une description plus complexe et dépassant le nombre de caractères limite (moins de 60 caractères pour un attribut `alt`), l'utilisation de l'attribut `longdesc` s'avère nécessaire :

<img src="billet" longdesc="desc/fiche2223.html" alt="fiche descriptive de l'article numéro 2223" />

#### Exemple de mauvaise pratique

Exemple d'une image présentant le texte "go" sur un formulaire de recherche.

<img src="/home/img/ok.gif" />

#### Exemple de bonne pratique

En reprenant l'exemple précédent et en rendant le commentaire explicite, on peut écrire :

<img src="/home/img/ok.gif" alt="Rechercher" />

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.4 : Pour chacune des images de la page, les textes dans l'attribut ALT font-ils moins de 60 caractères ?
- Fiche 1.9 : Il convient de remplacer un texte sous forme d'image par un texte mis en forme. Cette règle est-elle respectée ?

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