Alternatives textuelles

Remplacer les images réactives côté serveur

Règle: server-side-image-map
Gravité: Mineur
Niveau WCAG A

Pourquoi c’est important

Une image réactive côté serveur envoie des coordonnées de pixels : les destinations n’existent que comme positions dans une image. Il ne reste rien avec quoi un clavier ou un lecteur d’écran puisse travailler.

Comment corriger

Remplacez ismap par une <map> côté client avec des éléments <area>, chacun doté d’un alt.
Mieux encore : remplacez la carte par de vrais liens ou boutons positionnés au-dessus de l’image.

Dans le balisage

Échoue

<a href="/map"><img src="offices.png" ismap></a>

Réussit

<img src="offices.png" alt="Our offices" usemap="#offices">
<map name="offices">
  <area shape="rect" coords="0,0,60,40" href="/berlin" alt="Berlin">
</map>

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

2.1.1 Clavier (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur server-side-image-map (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.