retour vers le site AccessiWeb

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 ?

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

Valeur ajoutée pour le site

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) :

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

Les zones cliquables d'une carte de France sont commentées.

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.

Liste sous Lynx des zones cliquables d'une carte de France.

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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 1.4 Fiche suivante : fiche 1.6

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