retour vers le site AccessiWeb

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 ?

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

Valeur ajoutée pour le site

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

Autres ressources

revenir en haut de la page


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

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