# Guide AccessiWeb

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

## Fiche 1.7 : Pour chacune des images MAP, les zones de l'image MAP sont-elles définies juste après la déclaration de l'image MAP ?

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.7
- Niveau AccessiWeb : argent
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 12.3

revenir en haut de la page

### Comprendre

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

- Bénéfice 1 :
  Dans certains cas les zones réactives d'une image map ne sont pas codées immédiatement après la déclaration de l'image map, mais plus loin dans le code, voire à la fin de la page. Un utilisateur aveugle, par exemple, parcourant linéairement la page lira d'abord le commentaire général de l'image (image possédant l'attribut usemap), puis il lira le contenu de la page et lira enfin les commentaires associés aux zones réactives (balises `AREA`).
  En effet, les internautes aveugles utilisent généralement, pour naviguer, un lecteur d'écran ou un navigateur vocal qui ont la particularité de restituer l'information dans l'ordre dans lequel elle est inscrite dans le code source. C'est ce qu'on désigne par le terme de "lecture linéaire".
  Dans ce cas, l'accès linéaire à l'information provoque une rupture logique et ne permet pas à l'utilisateur de relier l'élément graphique principal aux zones réactives qui lui sont associées. Ceci peut s'avérer d'autant plus inintelligible si la page comporte plusieurs déclarations d'images map dissociées de leurs zones réactives.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  La maintenance et la mise à jour de données contenues dans l'image map est beaucoup plus aisée car la lecture du code est facilitée par le regroupement des informations qui ont un rapport direct entre elles.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Rechercher dans le code source la balise `IMG` contenant l'attribut `usemap` et vérifier si le bloc des zones réactives se trouve codé immédiatement après.
2. Vérifier également que le contenu de l'attribut `usemap` de la balise `IMG` et le contenu de l'attribut `name` de la balise `MAP` sont identiques.

#### 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.7.
3. Le code source de la page s'affiche dans une nouvelle fenêtre.
4. Rechercher dans le code source la balise `IMG` contenant l'attribut `usemap` et vérifier si le bloc des zones réactives se trouve codé immédiatement après.
5. Vérifier également que le contenu de l'attribut `usemap` de la balise `IMG` et le contenu de l'attribut `name` de la balise `MAP` sont identiques.

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

1. Cliquer sur le menu "Source", puis sur l'option "Voir le code source [Nouvelle fenêtre]".
2. Rechercher dans le code source la balise `IMG` contenant l'attribut `usemap` et vérifier si le bloc des zones réactives se trouve codé immédiatement après.
3. Vérifier également que le contenu de l'attribut `usemap` de la balise `IMG` et le contenu de l'attribut `name` de la balise `MAP` sont identiques.

##### 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. Rechercher dans le code source la balise `IMG` contenant l'attribut `usemap` et vérifier si le bloc des zones réactives se trouve codé immédiatement après.
4. Vérifier également que le contenu de l'attribut `usemap` de la balise `IMG` et le contenu de l'attribut `name` de la balise `MAP` sont identiques.

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

1. A l'aide de la touche G, passer d'élément graphique en élément graphique jusqu'à retrouver celui qui sert de support aux zones cliquables.
   Note : il se peut que cet élément graphique n'ait pas d'alternative textuelle, au quel cas Jaws fournit comme information le chemin du fichier image.
2. A partir de ce point, poursuivre la lecture de la page à l'aide de la flèche "bas".
3. Si le critère est respecté, les liens qui suivent correspondent aux zones réactives de l'image map (balises `AREA`). Autrement, vous entendrez du texte sans rapport avec les zones réactives.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

Le développeur doit veiller au respect de ce critère.

#### Implémentation

Une image map se compose de deux parties. Une première partie constituée par L'image en elle-même, caractérisée par la balise `IMG` et une seconde partie constituée par des zones réactives situées entre les balises ouvrantes et fermantes `MAP`. Il est impératif de ne pas séparer ces deux parties afin de permettre une bonne cohérence de l'ensemble de l'image.
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>

#### Exemple de mauvaise pratique

Dans l'exemple qui suit, l'image principale est déclarée au début du code source, mais les zones réactives sont reportées à la fin du code. Entre les deux, le contenu peut s'étendre sur plusieurs pages écran.

<html>
<head>
<title>image map dissociée des zones réactives</title>
</head>
<body>
<img src="./carte_geo.gif" style="width:120px;height:109px;border:0" usemap="#carte_geo" alt="carte de la région Rhône-Alpes" />
...
[Contenu de la page pouvant comprendre des titres, d'autres éléments graphiques, du texte sur plusieurs pages écran]
...
<map name="carte_geo">
<area shape="circle" coords="37,33,8" href="./departement_69.html" alt="département du rhône (69)" />
<area shape="circle" coords="25,38,8" href="./departement_42.html" alt="département de la loire (42)" />
<area shape="circle" coords="33,79,10" href="./departement_07.html" alt="département de l'ardèche (07)" />
</map>
</body>
</html>

#### Exemple de bonne pratique

Ici, la déclaration de l'image principale précède immédiatement celle des zones réactives.

<img src="./carte_geo.gif" style="width:120px;height:109px;border:0" usemap="#carte_geo" alt="carte de la région Rhône-Alpes" />
<map name="carte_geo">
<area shape="circle" coords="37,33,8" href="./departement_69.html" alt="département du rhône (69)" />
<area shape="circle" coords="25,38,8" href="./departement_42.html" alt="département de la loire (42)" />
<area shape="circle" coords="33,79,10" href="./departement_07.html" alt="département de l'ardèche (07)" />
</map>

revenir en haut de la page

### Illustrations

Note : pour lire les extraits sonores au format mp3 proposés sur ce guide, vous devez disposer d'un lecteur capable de lire ce type de fichier. Les enregistrements ont été réalisés à partir soit de la synthèse vocale utilisée par Jaws, soit celle utilisée par Home Page Reader. Pour plus d'informations sur le téléchargement de lecteurs de fichiers mp3, consulter le paragraphe Lecteurs multimédia de la page Outils d'aide à l'évaluation de ce guide.

Jaws lisant une zone cliquable dissociée des images maps (format mp3, 129 ko)

Voici comment l'"Exemple de mauvaise pratique" est lu par Jaws :
"Trois liens. Graphique : carte de la région Rhône-Alpes. Contenu de la page pouvant comprendre des titres, d'autres éléments graphiques et textes sur plusieurs pages d'écran. Lien : département du Rhône 69. Lien : département de la Loire 42. Lien : département de l'Ardèche 07."

Jaws lisant une zone cliquable rattachée aux images map (format mp3, 76 ko)

Voici comment l'"Exemple de bonne pratique" est lu par Jaws :
"Trois liens. Graphique : carte de la région Rhône-Alpes. Lien : département du Rhône 69. Lien : département de la Loire 42. Lien : département de l'Ardèche 07."

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 1.5 : Les commentaires associés à chacune des zones réactives d'une image map sont-ils pertinents ?
- Fiche 1.6 : Les zones de chacune des images MAP sont-elles ordonnées de manière logique ?

#### Autres ressources

- html techniques (section 12.3) : Divide large blocks of information into more manageable groups
- html Techniques (section 7.4) : Image maps
- Plongez dans l'accessibilité (jour 24) : Fournir des équivalents texte pour les images cliquables
- Accès pour tous : Accessibilité pour tous

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