IMG
ayant pour attribut usemap
ou ismap
. MAP
qui s'y réfère - théoriquement codée juste après.usmap
de l'image, et la valeur de l'attribut name
dans une balise MAP
. AREA
, situées entre les balises MAP
et /MAP
, suit bien un ordre logique donné par le contenu de l'attribut alt
. 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.
AREA
est déclarée dans un ordre logique (donné par le contenu de l'attribut alt
).AREA
est déclarée dans un ordre logique (donné par le contenu de l'attribut alt
).IMG
ayant pour attribut usemap
ou ismap
. MAP
qui s'y réfère - théoriquement codée juste après.usemap
de l'image, et la valeur de l'attribut name
dans une balise MAP
.AREA
, situées entre les balises MAP
et /MAP
, suit bien un ordre logique donné par le contenu de l'attribut alt
.Le développeur doit veiller au respect de ce critère.
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>
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.alt
et title
ne peut suivre une structure linéaire satisfaisante, l'ordre alphabétique reste convenable.AREA
en suivant l'ordre ainsi déterminé.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>
<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>
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>
<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>
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).