# Guide AccessiWeb

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

## Fiche 1.3 : Les éléments graphiques destinés à la décoration sont-ils commentés par ALT="" ?

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.3
- 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 :
  Certains éléments graphiques n'ont pas de valeur informative. C'est souvent le cas des pixels transparents qui servent uniquement à la mise en page. Or, tout élément graphique doit impérativement être commenté. Donc, les éléments graphiques servant à la mise en page doivent être commentés par une alternative textuelle nulle (En HTML, `alt`=""). Ceci permet notamment, aux personnes aveugles de lire la page avec une plus grande fluidité puisque les éléments graphique dotés d'une alternative textuelle nulle seront ignorés par un lecteur d'écran.
- Bénéfice 2 :
  Cela permet également d'éviter, dans le cas d'un lien englobant à la fois du texte et un élément graphique, de décrire l'élément graphique dont l'alternative textuelle serait redondante avec le texte contenu dans le lien.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Associer une alternative nulle à un élément de décoration ou mise en page, plutôt qu'un texte sans réelle valeur, permet d'alléger le poids de la page.

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. Identifier tous les éléments `IMG` qui servent à la décoration.
3. Pour chaque élément `IMG` servant à la décoration vérifier que l'attribut `alt` qui lui est associé a la valeur nulle (alt="").

#### 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.3.
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 destiné à la décoration, vérifier que le contenu de l'alternative textuelle est égal à `alt`="".

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

Méthode 1 :

1. Cliquer sur 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, déterminer s'il s'agit d'un élément de décoration ou de mise en page, et vérifier que le contenu de l'alternative textuelle est égal à ALT="".

Méthode 2 :

1. Cliquer sur l'option "Montrer les images" du menu "Images".
2. Tous les éléments graphiques de la page sont entourés d'un liseré de couleur et précédés de leur alternative textuelle.
3. Vérifier que tous les éléments graphiques destinés à la décoration ou à la mise en page sont bien commentés par ALT="".

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

1. Repérer sur la page, les images destinées à la décoration.
2. Dans le menu "Images", activer le sous-menu "Entourer les images" puis l'option "Images avec attribut alt vide".
3. Vérifier que les images destinées à la décoration sont entourés d'un liseret rouge (alt="").
4. S'il y a au moins une image destinée à la décoration qui n'est pas 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) :

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

Il convient de remplir l'attribut `alt` par une valeur vide :

<img="spacer.gif" alt="" />

Dans le cas d'une image englobée dans un lien :

<a href="cannes.html"><img="savoirplus.gif" alt="" />En savoir plus sur le festival de Canne</a>

#### Exemple de mauvaise pratique

Pixel transparent commenté par "spacer" :

<img="spacer.gif" alt="spacer" />

#### Exemple de bonne pratique

Pixel transparent non commenté :

<img="spacer.gif" alt="" />

revenir en haut de la page

### Illustrations

Cette copie d'écran montre un bon exemple d'alternative textuelle donnée à une image lien (l'alternative textuelle est "Retour vers la page d'accueil").

Cette copie d'écran montre des mauvais exemples d'alternatives textuelles données à des éléments graphiques destinés à la mise en page et qui sont commentés inutilement par "spacer", "hautmin2_r1_c5", etc.

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

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