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

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

- Bénéfice 1 :
  Les personnes aveugles, par exemple, ne peuvent pas voir les éléments graphiques et n'ont, par conséquent, pas accès à l'information qu'ils véhiculent. Pour consulter une page Internet, elles utilisent soit un navigateur textuel, soit une aide technique du type lecteur d'écran.
  A l'heure actuelle, ces aides techniques interprètent uniquement les données textuelles présentes sur une page. Cela signifie qu'elles ne peuvent pas directement décrire les éléments graphiques.
  Les utilisateurs de ces aides techniques n'auront accès à l'information véhiculée par les éléments graphiques que si le concepteur de la page a pris soin de fournir systématiquement une alternative textuelle à l'ensemble des éléments graphiques. C'est précisément le contenu de l'alternative textuelle qui sera restitué à l'utilisateur.
  Si aucune alternative textuelle n'est associée aux éléments graphiques, les aides techniques vont néanmoins tenter d'afficher une information pour l'utilisateur. Dans la plupart des cas, c'est le nom de fichier de l'élément graphique qui est affiché, par exemple, "ar_000.jpg". Cette information est dénuée de sens pour l'utilisateur. Il y a perte d'information.
- Bénéfice 2 :
  Les utilisateurs n'ayant qu'une connexion à faible débit, peuvent être amenés à désactiver l'affichage des éléments graphiques dans leur navigateur afin de gagner du temps lors du chargement de la page. Concrètement, lorsque la page est chargée, aucun élément graphique n'apparaît. Ces utilisateurs deviennent ainsi dépendants du contenu de l'alternative textuelle. C'est donc pour eux le seul moyen d'accéder à l'information véhiculée par les éléments graphiques.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Le site sera valide selon les spécifications du W3C qui rendent obligatoire la présence de l'attribut `alt` sur les balises `IMG` et `AREA`.
- Bénéfice 2 :
  Certains moteurs de recherche peuvent référencer le contenu de l'attribut `alt` des éléments graphiques.

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

- Si l'élément graphique est destiné à la décoration ou à la mise en page, il ne faut pas tenter de le décrire :

  <img src="'space.gif" alt="spacer" />

- Si l'élément graphique sert à illustrer le texte (photo accompagnant un article de journal, pictogramme...), le contenu de l'alternative textuelle ne doit pas être une description narrative :

  <img src="fauteuil.gif" alt="fauteuil roulant stylisé en blanc sur fond bleu" />

- Si l'élément graphique est un lien, l'alternative textuelle ne doit pas être une description de l'image ou un symbole visuel :

  <a href="next.html" ><img src="fleche_droite.gif" alt=">>" /></a>

#### Exemple de bonne pratique

- Si l'élément graphique est destiné à la décoration ou à la mise en page, il faut lui associer une alternative textuelle nulle :

  <img src="'space.gif" alt="" />

- Si l'élément graphique sert à illustrer le texte (photo accompagnant un article de journal, pictogramme...), le contenu de l'alternative textuelle doit décrire l'information véhiculée :

  <img src="fauteuil.gif" alt="accès réservé aux handicapés" />

- Si l'élément graphique est un lien, le contenu de l'alternative textuelle doit indiquer à l'utilisateur la destination du lien. Ici, c'est la fonction de l'élément graphique qui doit être restituée et non sa description :

  <a href="next.html"><img src="fleche_droite.gif" alt="page suivante" /></a>

revenir en haut de la page

### Illustrations

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

- 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.12 : Pour chacune des images liens, le texte contenu dans l'attribut ALT donne-t-il la fonction du lien ?
- Fiche 11.6 : Dans un formulaire, le commentaire du bouton SUBMIT est-il pertinent ?

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