# Guide AccessiWeb

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

## Fiche 1.1 : Chaque élément graphique possède-t-il une alternative textuelle ?

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.1
- 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. Identifier tous les éléments `IMG` en faisant une recherche dans le code source.
2. Vérifier que chaque élément `IMG` a un attribut `alt` qui lui est associé.

#### 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.1.
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. Vérifier que chacun d'eux possède l'attribut `alt`.

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

1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Images" de la Barre d'Outils Accessibilité, activer l'option "Liste des images [Nouvelle fenêtre]".
3. Tous les éléments graphiques de la page s'affichent avec, en dessous, l'extrait de code source correspondant.
4. Vérifier que chacun d'eux possède l'attribut `alt`.

##### Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :

1. Dans le menu "Images", activer le sous-menu "Entourer les images" puis l'option "Images sans attribut alt".
2. Tous les éléments graphiques de la page ne comportant pas d'attribut `alt` sont entourés d'un liseret rouge.
3. S'il y a au moins une image 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) :

1. Lire la page. Il est possible de passer d'élément graphique en élément graphique en tapant sur la touche G du clavier.
2. Pour chaque image sans commentaire (absence de l'attribut `alt`), Jaws donnera le nom du fichier image ou l'adresse du lien de la page vers laquelle pointe l'image.
3. Si l'image possède un attribut `alt` vide (alt=""), elle sera détectée par Jaws comme étant un élément graphique sans importance et ne sera pas affichée.
4. Si l'image a une alternative textuelle (alt="alternative textuelle"), celle-ci s'affiche dans la fenêtre représentant l'afficheur braille et est lue par Jaws.
   Note : Jaws ne permet pas d'identifier à 100% si l'image a un attribut `alt`. Par exemple, si Jaws donne le nom du fichier image, cela peut signifier soit que l'attribut `alt` est absent, soit qu'il est présent et qu'il contient le nom du fichier image. Par conséquent, si vous avez un doute sur le texte donné par Jaws en remplacement d'une image, il est recommandé de compléter l'évaluation du critère en utilisant une vériification par le code source. Par ailleurs, l'ordre d'apparition des éléments graphiques est celui du code source.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

La mise en oeuvre de ce critère concerne les concepteurs de site web.

#### Implémentation

Le seul moyen de fournir une alternative textuelle à un élément graphique est d'utiliser l'attribut alt des balises IMG et AREA.

<img src="fichier_image.jpg" alt="contenu de l'alternative textuelle" />

<area shape="rect" coords="0,0,30,30" href="monlien.html" alt="contenu de l'alternative textuelle" />

#### Mise en oeuvre à l'aide d'outils d'édition de page web

- avec FrontPage : Le commentaire se place dans l'emplacement "Texte" de la boîte de dialogue "propriétés de l'image" (cliquer sur l'image avec le bouton droit pour la trouver).
- avec Dreamweaver : Dans le champ "sec" (comme "secondaire") dans la fenêtre des propriétés, pour mettre un alt="" mettez "vide"
- avec WebExpert : Dans la boîte de dialogue "Insérer une image graphique", placer le commentaire dans la case "Alternative".
- avec HotMetal Pro : Lors de l'insertion de l'image, placer le commentaire dans la case "Alternate Text" de la boîte de dialogue "Image Properties". Cette boîte de dialogue peut être retrouvée par la suite en cliquant sur l'image avec le bouton droit (en mode "TagsOn" ou "WYSIWYG").
- avec N-View : utilisez l'option "texte alternatif" du menu "images".

#### Exemple de mauvaise pratique

L'élément graphique suivant ne comporte pas d'alternative textuelle (l'attribut `alt` est absent).

<img src="spacer.gif" />

#### Exemple de bonne pratique

L'élément graphique suivant contient une alternative textuelle.

<img src="couple.jpg" alt="couple" />

revenir en haut de la page

### Illustrations

Cette copie d'écran montre les alternatives textuelles associées aux éléments graphiques lorsque ceux-ci ne sont pas chargés par le navigateur.

Cette copie d'écran montre la façon dont le navigateur Lynx restitue des images ne comportant pas d'alternative textuelle.

revenir en haut de la page

### Références

#### Autres fiches à consulter

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