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.
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.
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) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "1. Eléments graphiques" de la Barre AccessiWeb, activer le critère 1.7.
Le code source de la page s'affiche dans une nouvelle fenêtre.
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.
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) :
Cliquer sur le menu "Source", puis sur l'option "Voir le code source [Nouvelle fenêtre]".
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.
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) :
Activer l'option "Voir Source" du menu "Voir Source".
Une nouvelle fenêtre apparaît et affiche le code source.
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.
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) :
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.
A partir de ce point, poursuivre la lecture de la page à l'aide de la flèche "bas".
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.
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>
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.
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."
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."