# Guide AccessiWeb

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

## Fiche 1.11 : Si une description détaillée de l'image est présente, son contenu est-il pertinent ?

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.11
- 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 véhiculent une information dont la transcription, par la longueur du texte qu'elle nécessite, ne peut être fournie par l'attribut `alt`. Or, les utilisateurs aveugles qui ne peuvent voir les images, ou ceux qui désactivent le chargement des images, ont parfois besoin d'une description détaillée pour en comprendre le sens.
  Lors de la rédaction de cette description, il faut analyser avec précision l'information véhiculée par l'image pour la transcrire de manière pertinente. Il faut éviter de tomber dans la narration et s'attacher à faire ressortir les points-clés.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Toute information publiée sous forme de texte dans un site, possède toujours l'avantage d'apporter une meilleure lisibilité de celui-ci pour les moteurs de recherche.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Identifier tous les éléments `IMG` qui ont un attribut `longdesc` en faisant une recherche dans le code source.
2. Pour chaque élément `IMG` applicable, juger si la cible de l'attribut `longdesc` rend correctement toute l'information véhiculée par 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.11.
3. Toutes les images de la page sont entourées d'un liseret rouge et sont précédées d'un extrait de code indiquant si l'attribut `longdesc` est présent ou non.
4. Quand un attribut `longdesc` est associé à une image, son contenu (lien vers un fichier de description) est affiché et il est cliquable.
5. Pour chaque image comportant l'attribut `longdesc`, cliquer sur son contenu et vérifier la pertinence de la description longue associée.
   Note : Pour revenir à la page initiale, recharger la page en cliquant sur la touche F5.

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

1. Ouvrir la page à analyser sous Internet Explorer.
2. Cliquer sur le menu "Images", puis sur l'option "Liste des images [Nouvelle fenêtre]".
3. L'ensemble des éléments graphiques et leur extrait de code associé s'affichent.
4. Pour chaque élément graphique comportant l'attribut `longdesc`, sélectionner, puis copier/coller le chemin du fichier contenant la description longue, dans la barre d'adresse d'Internet Explorer.
   Valider, puis lire le contenu de la description longue et vérifier sa pertinence.

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

Méthode 1 :

1. Activer l'option "Voir Source" du menu "Voir Source".
2. Une nouvelle fenêtre apparaît et affiche le code source.
3. Pour chaque élément graphique dont l'attribut `longdesc` est renseigné, sélectionner, puis copier/coller le chemin du fichier contenant la description longue, dans la barre d'adresse de Firefox.
4. Valider, puis lire le contenu de la description longue et vérifier sa pertinence.

Méthode 2 :

1. Activer l'option "Informations sur la page" du menu "Information" puis l'onglet "Médias" de la nouvelle fenêtre.
2. La liste des images présentes sur la page apparaît.
3. Pour chaque élément graphique dont l'attribut `longdesc` est renseigné, sélectionner, puis copier/coller le chemin du fichier contenant la description longue, dans la barre d'adresse de FirefoxFirefox.
4. Valider, puis lire le contenu de la description longue et vérifier sa pertinence.

##### Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :

1. Afficher la page à évaluer et passer sur chaque é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. Dès qu'il rencontre l'attribut `longdesc` sur une image, Jaws dit "appuyer sur entrée pour obtenir une description longue".
3. Afficher le contenu de cette longue description et comparez-le avec le contenu visuel de l’image.

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

Différentes méthodes sont possibles. A chacun d'utiliser celle qui correspondra le mieux à ses contraintes (graphiques, éditoriales, etc.) :

- Soit mettre une légende texte explicite à proximité de l'image
- Soit utiliser l'attribut `longdesc` pour associer un commentaire plus détaillé.

<img src="stat.jpg" alt="évolution de la population française : 1990-2004" longdesc="pop_fr.html" />

Mais les règles suivantes doivent être respectées :

- Le contenu doit être une description de l'élément graphique associé,
- le contenu doit être compris par tous les internautes,
- le contenu doit apporter des informations supplémentaires,
- le contenu doit être dans la langue du site.

#### Exemple de mauvaise pratique

Le site www.unsitecorporate.com publie une photo de groupe représentant le conseil d'administration.
Inclure la description de cette photo par l'intermédiaire de l'attribut `alt` risque de dépasser la limite autorisée pour la longueur des alternatives textuelles. Ainsi, il faut éviter le code suivant :

<img src="images/conseil_admin.jpg alt=""en partant de la gauche : M.Jean, directeur - M.Pierre, directeur - M.Claude, directeur - Mme.Henry - PDG, Mlle Juliette - Directrice." />

#### Exemple de bonne pratique

En reprenant l'exemple précédent, on ajoute l'attribut `longdesc` :

<img src="images/conseil_admin.jpg alt="le conseil d'administration" longdesc="conseil_admin.html" />

Le fichier "conseil_admin.html" contient :
"en partant de la gauche : M.Jean, directeur - M.Pierre, directeur - M.Claude, directeur - Mme.Henry - PDG, Mlle Juliette - Directrice."

revenir en haut de la page

### Illustrations

Cette copie d'écran présente un camembert statistique des recettes d'une société. L'alternative textuelle ne suffit à décrire entièrement l'information véhiculée par ce graphique. Il faut donc lui associer une description longue.

Cette copie d'écran présente la page qui contient la description associée au camembert. Le texte décrit, la valeur et la signification de chaque portion.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- 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.10 : Quand une image nécessite une description détaillée, un commentaire texte lui est-il associé ?

#### Autres ressources

- html Techniques (section 7.2) : Long descriptions of images
- Web Content Accessibility Curriculum : a text equivalent for graphical representations of text (including symbols)
- stuffandnonsense.co.uk : Descriptive content to images
- acces-pour-tous : les images

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