# Guide AccessiWeb

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

## Fiche 1.6 : Les zones de chacune des images MAP sont-elles ordonnées de manière logique ?

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

revenir en haut de la page

### Comprendre

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

- Bénéfice 1 :
  Pour les utilisateurs aveugles qui ne peuvent les voir, les zones réactives des images map leur sont présentées comme une succession de liens, lorsqu'ils naviguent à l'aide d'un lecteur d'écran ou d'un navigateur vocal.
  Ces zones réactives apparaissent dans l'ordre dans lequel elles sont écrites dans le code source de la page. Il vaut donc mieux suivre un ordre logique pour les présenter afin que l'utilisateur puisse ainsi repérer plus rapidement l'élément qu'il recherche.
  Pour la liste des départements français, par exemple, il est préférable de les classer par ordre alphabétique.

#### Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Repérer l'image servant de support aux zones cliquables. Il s'agit d'un élément `IMG` ayant pour attribut `usemap` ou `ismap`.
2. Repérer la balise `MAP` qui s'y réfère - théoriquement codée juste après.
3. Sinon, retrouver l'égalité entre la valeur de l'attribut `usmap` de l'image, et la valeur de l'attribut `name` dans une balise `MAP`.
4. Vérifier alors que l'ordre dans lequel les balises `AREA`, situées entre les balises `MAP` et `/MAP`, suit bien un ordre logique donné par le contenu de l'attribut `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.6.
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` est déclarée dans un ordre logique (donné par le 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` est déclarée dans un ordre logique (donné par le contenu de l'attribut `alt`).

##### 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. Repérer l'image servant de support aux zones cliquables. Il s'agit d'un élément `IMG` ayant pour attribut `usemap` ou `ismap`.
4. Repérer la balise `MAP` qui s'y réfère - théoriquement codée juste après.
5. Sinon, retrouver l'égalité entre la valeur de l'attribut `usemap` de l'image, et la valeur de l'attribut `name` dans une balise `MAP`.
6. Vérifier alors que l'ordre dans lequel les balises `AREA`, situées entre les balises `MAP` et `/MAP`, suit bien un ordre logique donné par le contenu de l'attribut `alt`.

##### 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é.
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 de l'image.
4. Vérifier que cette suite de liens est ordonnée de manière logique. L'ordre indiqué par le lecteur d'écran est celui de déclaration des zones réactives dans le code source de la page.

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

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" title="zone1" shape="[...]" coords="[...]" />
<area alt="zone2" title="zone2" shape="[...]" coords="[...]" />
...
</map>

Dans les balises `AREA`, considérer les attributs `alt` et `title` - qu'il est conseillé de renseigner à l'identique pour une balise `AREA` donnée. Trier logiquement les valeurs de ces attributs : c'est-à-dire par classement alphabétique, chronologique, ou dans un ordre qui puisse être découvert "mot à mot" par l'utilisateur de façon cohérente.
Si l'ensemble des attributs `alt` et `title` ne peut suivre une structure linéaire satisfaisante, l'ordre alphabétique reste convenable.
Coder ensuite les balises `AREA` en suivant l'ordre ainsi déterminé.

#### Exemple de mauvaise pratique

Ce premier exemple est celui d'un plan d'une habitation pour lequel les différentes zones, lors d'une lecture linéaire, ne sont pas présentées selon l'ordre de déplacement logique dans une maison. Ici, on entre dans la chambre avant même d'être passé par l'entrée et l'anti-chambre.

<!-- Exemple de code pour une image présentant le plan d'une habitation -->
<img src="maison.jpg" alt="Plan de l'habitation" width="479" height="246" border="0" usemap="#plan" />
<map name="plan">
<area shape="rect" coords="100,200,200,100" href="#" alt="Chambre" title="Chambre" />
<area shape="rect" coords="0,100,100,0" href="#" alt="Entrée" title="Entrée" />
<area shape="rect" coords="100,100,200,0" href="#" alt="Antichambre" title="Antichambre" />
</map>

Voici un autre exemple, plus fréquemment rencontré sur Internet. Prenons simplement l'exemple d'une carte de la région Rhône-Alpes. Le code suivant présente une suite de départements sans ordre logique.

<html>
<head>
<title>images map mal ordonnées</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="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

Ceci reprend l'exemple du plan d'habitation où l'on passe d'abord par l'entrée et l'anti-chambre avant d'arriver dans la chambre.

<!-- Exemple de code pour une image présentant le plan d'une habitation -->
<img src="maison.jpg" alt="Plan de l'habitation" width="479" height="246" border="0" usemap="#plan" />
<map name="plan">
<area shape="rect" coords="0,100,100,0" href="#" alt="Entrée" title="Entrée" />
<area shape="rect" coords="100,100,200,0" href="#" alt="Antichambre" title="Antichambre" />
<area shape="rect" coords="100,200,200,100" href="#" alt="Chambre" title="Chambre" />
</map>

En reprenant le second exemple, il semble plus logique de classer les départements par ordre alphabétique :

<html>
<head>
<title>images map bien ordonnées</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 illustration est basée sur une carte de la région Rhône-Alpes. L'image représente la capture d'écran des zones sensibles d'une image map interprétée par Lynx. Ces zones, correspondant aux balises `AREA`, n'ont pas été ordonnées de manière logique. Lynx les présente donc sous la forme d'une liste de liens dans laquelle il est difficile de s'y repérer : Département 69 Département 42 Département 07.

Cette illustration est basée sur une carte de la région Rhône-Alpes. L'image représente la capture d'écran des zones sensibles d'une image map interprétée par Lynx. Ces zones, correspondant aux balises 'area', ont été ordonnées de manière logique. Cela a également comme effet bénéfique d'inviter à préciser et à expliciter la rédaction des commentaires alternatifs. Lynx les présente donc sous la forme d'une liste de liens explicites dans laquelle il est aisé de s'y repérer : Département de l'Ardèche (07) Département de la Loire (42) Département du Rhône (69).

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.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 ?
- Fiche 1.12 : Pour chacune des images liens, le texte contenu dans l'attribut ALT donne-t-il la fonction du lien ?
- Fiche 6.1 : L'intitulé des liens fait-il moins de 80 caractères ?
- Fiche 6.2 : Les liens sont-ils explicites ?
- Fiche 11.8 : Les informations sont-elles organisées dans un ordre logique dans les listes de choix ?

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