# Guide AccessiWeb

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

## Fiche 1.5 : Les commentaires associés à chacune des zones réactives d'une image map sont-ils pertinents ?

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.5
- Niveau AccessiWeb : bronze
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 1 de WAI) : 1.1, 1.2, 9.1

revenir en haut de la page

### Comprendre

#### Bénéfices pour les utilisateurs

- Bénéfice 1:
  Lorsque une zone réactive possède une alternative textuelle explicite par rapport au contexte, cette dernière permet aux utilisateurs qui ne peuvent pas voir les images à l'écran de comprendre le rôle de la zone réactive.
- Bénéfice 2 :
  Donner une alternative textuelle pertinente aux zone réactives d'une image map est d'autant plus important qu'elle est destinée à orienter l'utilisateur vers d'autres pages du site et lui permet de progresser dans sa recherche d'informations.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  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. Effectuer une recherche sur les attributs `usemap` et `ismap` de la balise `MAP` ainsi que sur les balises `AREA` pour déterminer le nombre d'images map se trouvant dans la page.
2. Vérifier que les images contenant les attributs `usemap` et `ismap` possèdent une alternative textuelle pertinente.
3. Vérifier que chaque balise `AREA` possède également une alternative textuelle pertinente.

#### 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.5.
3. Un message d'alerte indique si aucune image map n'a été trouvée ("Aucune zone cliquable côté serveur ou côté client"). Si une ou des images maps sont trouvées, elles sont affichées dans une nouvelle fenêtre avec leurs codes sources et en particulier les éléments area associés.
4. Vérifier que chaque balise `AREA` possède une alternative textuelle pertinente (contenu de l'attribut `alt`).

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

1. Aller dans "Images" puis "Informations sur les images map [Nouvelle fenêtre]".
2. Vérifier que chaque balise `AREA` possède une alternative textuelle pertinente.

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

1. Activer l'option "Voir Source" du menu "Voir Source".
2. Une nouvelle fenêtre apparaît et affiche le code source.
3. Effectuer une recherche sur les attributs `usemap` et `ismap` de la balise `MAP` ainsi que sur les balises `AREA` pour déterminer le nombre d'images map se trouvant dans la page.
4. Vérifier que les images contenant les attributs `usemap` et `ismap` possèdent une alternative textuelle pertinente.
5. Vérifier que chaque balise `AREA` possède également une alternative textuelle pertinente.

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

1. Ouvrir la page à analyser sous Internet Explorer.
2. A l'aide de la touche G, passer d'élément graphique en élément graphique jusqu'à l'image principale supportant les zones réactives. Si celle-ci a une alternative textuelle, elle est affichée dans la fenêtre représentant l'afficheur Braille et est également lue par Jaws. Sinon, c'est le nom ou le chemin du fichier source qui est restitué. Dans ce cas, le critère est invalidé. Si l'image principale possède une alternative textuelle, passer à l'étape suivante.
3. Poursuivre la navigation de graphique en graphique jusqu'à repérer les liens annoncés par Jaws comme "lien carte image". Il s'agit des zones réactives.
4. Vérifier, pour chacune d'elles, la présence, puis la pertinence de l'alternative textuelle qui leur est associée.

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

Une image map est composée d'une image de base et de zones réactives. Par exemple : une image représentant une carte de France sur laquelle apparaît l'ensemble des départements.
Il ne faut donc pas oublier de renseigner tous les attributs `alt` : celui de l'image de base (carte de France), codée par la balise `IMG`, et celui de chaque zone réactive (le nom des départements), codée par la balise `AREA`.
Syntaxe générale :

<!-- déclaration de l'image supportant les zones réactives.
L'attribut usemap permet de relier l'image à la balise MAP ayant le même nom -->
<img alt="image_principale" usemap="#map_name" src="[...]" />
<map name="map_name">
<!-- définition des zones réactives de l'image -->
<area alt="zone1" shape="[...]" coords="[...]" />
<area alt="zone2" shape="[...]" coords="[...]" />
...
</map>

Comme pour tout élément graphique, l'alternative textuelle associée à une image map doit avoir un contenu explicite : dans l'exemple d'une carte de France découpée par départements, il est plus pertinent d'associer à chaque zone réactive le nom du département plutôt que son numéro.
Il y a deux types d'images map (`usemap` et `ismap`) :

- attribut `usemap` (côté client) : Avec un navigateur textuel de type Lynx, le contenu de l'attribut `alt` permet de fournir une alternative textuelle à chacune des zones réactives. Par conséquent, il est nécessaire de renseigner chaque attribut `alt` de la façon la plus explicite possible afin de donner une description textuelle précise de l'image et de chacune des zones qui la composent.
- attribut `ismap` (côté serveur) : Le cas de l'attribut `ismap` est différent de l'attribut `usemap` : en effet, cet attribut ne nécessite pas la déclaration de zones cliquables directement dans le code source de la page. L'utilisateur se servant d'un navigateur textuel se retrouve, par voie de conséquence devant "une image" dans laquelle il ne peut pas cliquer. Pour l'image map côté serveur, prévoir des liens textuels redondants reprenant le contenu de chacune des zones réactives.

#### Exemple de mauvaise pratique

Prenons simplement l'exemple d'une carte de la région Rhône-Alpes. Le code suivant présente une alternative textuelle peut pertinente pour chacune des zones réactives (un nom est plus explicite qu'un numéro). L'image principale supportant les zones réactives ne possède pas d'alternative textuelle, ce qui invalide également le critère :

<html>
<head>
<title>images map</title>
</head>
<body>
<img src="../cartes/mini_carte.gif" style="width:120px;height:109px;border:0" usemap="#mini_carte" />
<map name="mini_carte" title="mini carte de la région rhône-Alpes">
<area shape="circle" coords="37,33,8" href="affiche_rub.php?rub=$rub&dep=69" alt="département 69" />
<area shape="circle" coords="25,38,8" href="affiche_rub.php?rub=$rub&dep=42" alt="Département 42" />
<area shape="circle" coords="33,79,10" href=" affiche_rub.php?rub=$rub&dep=07" alt="Département 07" />
</map>
</body>
</html>

#### Exemple de bonne pratique

En reprenant l'exemple précédent, le code corrigé présente des alternatives textuelles pertinentes ainsi qu'un ordonnancement des départements par ordre alphabétique. L'image principale supportant les zones réactives est également commentée :

<html>
<head>
<title>images map</title>
</head>
<body>
<img src="../cartes/mini_carte.gif" style="width:120px;height:109px;border:0" usemap="#mini_carte" alt="carte de la région Rhône-Alpes par départements" />
<map name="mini_carte" title="mini carte de la région rhône-Alpes">
<area shape="circle" coords="33,79,10" href=" affiche_rub.php?rub=$rub&dep=07" alt="Département de l'Ardèche (07)" />
<area shape="circle" coords="25,38,8" href="affiche_rub.php?rub=$rub&dep=42" alt="Département de la Loire (42)" />
<area shape="circle" coords="37,33,8" href="affiche_rub.php?rub=$rub&dep=69" alt="Département du Rhône (69)" />
</map>
</body>
</html>

revenir en haut de la page

### Illustrations

Cette copie d'écran présente une carte de France découpées en plusieurs zones. La souris pointant sur une de ces zones fait apparaître une info-bulle dont le texte est "Alpes-Méditerrannée". La balise `AREA` est correctement commentée.

Cette copie d'écran sous le navigateur textuel Lynx montre les mêmes zones cliquables que la première image. Lynx affiche l'alternative textuelle commentaire de ces zones cliquables. Elles sont correctement commentées.

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.4 : Pour chacune des images de la page, les textes dans l'attribut ALT font-ils moins de 60 caractères ?
- 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.4) : Image maps
- Plongez dans l'accessibilité (jour 24) : Fournir des équivalents texte pour les images cliquables
- openweb : Les images accessibles
- la-grange.net : Fournir des équivalents texte pour les images
- Accès pour tous : Les images réactives

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