server-side-image-map-absent

Les cartes-images côté serveur doivent avoir une alternative utilisable au clavier

automaticWCAG 2.1.1 (A)confiance : highgravité : seriousoperable

Demande, pour chaque <img ismap> placée dans un lien, si la page propose les mêmes destinations sous forme de liens atteignables au clavier, puisqu’une carte-image côté serveur n’a aucune zone propre utilisable au clavier.

Applicabilité. S’applique à toute portée d’analyse. Une <img ismap> dans un <a href> est une carte-image côté serveur : le navigateur envoie les coordonnées du clic à l’URL du lien, ce qui n’a pas d’équivalent utilisable au clavier et n’expose aucune zone individuelle aux technologies d’assistance.

Attendu. Chaque carte-image côté serveur est signalée comme cantTell : le critère 2.1.1 est satisfait lorsque les mêmes destinations sont aussi proposées sous forme de liens atteignables au clavier, ce que la règle ne peut pas vérifier. Les cartes-images côté client (<map>/<area>) ne sont pas signalées. Une portée sans <img ismap> réussit. Une portée dont les seules <img ismap> sont hors d’un lien est notApplicable : ismap n’y fait rien, il n’y a donc pas de carte-image côté serveur (l’attribut mal placé est du HTML non valide, affaire du validateur).

Exemples

pass
<img src="image.png" usemap="#nav" alt="Site map">
<map name="nav">
<area href="/x" shape="rect" coords="0,0,10,10" alt="Go">
</map>

Une carte-image côté client n’a pas d’attribut ismap, ce qui satisfait la règle d’emblée. (Une <img ismap> hors d’un lien ne fait rien et rend la règle non applicable.)

can't tell
<a href="/map-handler">
<img src="image.png" ismap alt="Site map">
</a>

ismap dépend de l’envoi des coordonnées du clic au serveur par le navigateur ; les zones de la carte ne sont donc pas atteignables au clavier. Une personne vérifie si la page propose les mêmes destinations sous forme de liens. Cette règle n’échoue jamais.

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

SERVER_SIDE_IMAGE_MAP

  1. Repérez l’image map indiquée par le rapport et cliquez sur ses zones pour lister la destination de chacune.
  2. Laissez le pointeur de côté, parcourez la page avec Tab jusqu’au lien image, puis appuyez sur Entrée et notez ce qui se passe.
  3. Cherchez ailleurs sur la page des liens texte ordinaires vers chacune des destinations listées, et vérifiez que vous pouvez les atteindre et les suivre avec Tab et Entrée.

Réussite. Chaque destination de l’image map est aussi proposée sous forme de lien utilisable au clavier.

Échec. Une destination ne peut être atteinte qu’en cliquant sur un point de l’image, ce qui ne respecte pas le critère WCAG 2.1.1.

Voir le code source