alt
des images.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.usemap
et ismap
possèdent une alternative textuelle pertinente.AREA
possède également une alternative textuelle pertinente. 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
possède une alternative textuelle pertinente (contenu de l'attribut alt
).AREA
possède une alternative textuelle pertinente. 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.usemap
et ismap
possèdent une alternative textuelle pertinente. AREA
possède également une alternative textuelle pertinente.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.
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>
usemap
et ismap
) :
usemap
(côté client) : Avec un navigateur textuel de type Lynx, le contenu de l'attribut alt
permet de fournir une alternative textuelle à chacune des zones réactives. Par conséquent, il est nécessaire de renseigner chaque attribut alt
de la façon la plus explicite possible afin de donner une description textuelle précise de l'image et de chacune des zones qui la composent.
ismap
(côté serveur) : Le cas de l'attribut ismap
est différent de l'attribut usemap
: en effet, cet attribut ne nécessite pas la déclaration de zones cliquables directement dans le code source de la page. L'utilisateur se servant d'un navigateur textuel se retrouve, par voie de conséquence devant "une image" dans laquelle il ne peut pas cliquer. Pour l'image map côté serveur, prévoir des liens textuels redondants reprenant le contenu de chacune des zones réactives. 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>
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>
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.
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.