retour vers le site AccessiWeb

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 ?

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

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

Zones sensibles non ordonnées d'une image map sur Lynx

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.

Zones sensibles ordonnées d'une image map sur Lynx

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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 1.5 Fiche suivante : fiche 1.7

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact