Infographies accessibles : la description longue en pratique

Une infographie condense des données, du texte et des repères visuels dans une seule image. C'est efficace, et c'est exactement ce qui la rend difficile à rendre accessible : toute l'information est enfermée dans un fichier que la machine ne sait pas lire.

Le réflexe habituel consiste à remplir l'attribut alt et à passer à autre chose. Il ne suffit pas, et le référentiel le dit précisément.

Ce que le RGAA demande exactement

Trois critères se répartissent le travail, et les confondre est la cause de la plupart des infographies mal traitées.

Le critère 1.1 est satisfait par une phrase : « Infographie présentant les cinq étapes du processus de recyclage en France ». Cela identifie l'image, cela ne restitue rien de son contenu.

Le critère 1.6 est celui qui mord sur les infographies. Dès que l'image porte plusieurs valeurs, une progression ou une comparaison, la description détaillée devient obligatoire. Et le critère 1.7 ajoute la seule exigence que la machine ne saura jamais vérifier : que cette description soit pertinente, c'est-à-dire qu'elle transmette la même information que l'image.

Les trois techniques, et celle qu'il faut préférer

Le texte visible dans la page. La transcription est placée sous l'infographie, lisible par tout le monde. C'est la solution la plus robuste, et elle profite bien au-delà des lecteurs d'écran : à qui consulte sur mobile, à qui a une connexion lente, à qui veut copier une valeur pour la citer.

Le lien vers une page de description. Acceptable, avec un intitulé de lien explicite.

<figure>
  <img src="infographie-recyclage.png"
       alt="Infographie sur le processus de recyclage en France">
  <figcaption>
    Le processus de recyclage en 5 étapes.
    <a href="/descriptions/recyclage-infographie.html">
      Description textuelle complète
    </a>
  </figcaption>
</figure>

La zone masquée reliée par aria-describedby. Techniquement valide, mais c'est celle qui vieillit le plus mal : personne ne la relit, personne ne s'aperçoit qu'elle a cessé de correspondre à l'image quand celle-ci est mise à jour.

<div class="sr-only" id="desc-infographie">
  <!-- Description complète ici -->
</div>
<img src="infographie.png"
     alt="Infographie sur le recyclage"
     aria-describedby="desc-infographie">

Écrire une description qui sert à quelque chose

L'erreur classique consiste à décrire l'image. Il faut restituer son contenu, ce qui n'est pas la même opération. « Un graphique en barres bleues avec cinq colonnes » décrit ; « les ventes progressent de 12 % par trimestre sauf au troisième, en recul de 4 % » restitue.

Trois mouvements suffisent :

1. Le contexte : le type de représentation et ce qu'elle cherche à montrer.
2. Les données : les valeurs, dans un ordre logique, sans en omettre une qui porterait l'argument.
3. La conclusion : ce que l'infographie veut faire comprendre. C'est souvent l'information la plus utile, et celle qu'on oublie le plus.

Dès qu'il y a des chiffres, doublez la description d'un tableau de données. Le critère 5.7 vous dira comment associer chaque cellule à ses en-têtes ; le tableau porte alors les valeurs exactes, la description porte la tendance.

Concevoir l'infographie pour qu'elle soit descriptible

Une partie du travail se joue avant l'export, au moment de la conception.

Ne faites jamais porter l'information par la seule couleur. Le critère 3.1 l'interdit, et un rouge et un vert peuvent apparaître comme deux gris identiques. Doublez la couleur par un signe, un motif ou une étiquette directe. Notre guide sur le daltonisme détaille les combinaisons à éviter.

Contrastez les éléments porteurs de sens. Les barres, les lignes et les icônes significatives doivent atteindre 3:1 avec les couleurs contiguës. Le texte incrusté, lui, vise 4,5:1. Le calculateur de contraste tranche en quelques secondes.

Évitez le texte incrusté dans l'image. C'est la source d'ennuis la plus tenace : ce texte ne s'agrandit pas, ne se sélectionne pas, se dégrade à la compression, et se retrouve illisible dès que l'image est réduite. Quand c'est possible, sortez le texte de l'image et posez-le en HTML par-dessus.

Prévoyez la lecture linéaire. Une infographie se lit visuellement dans tous les sens ; sa description se lit dans un seul. Si votre composition n'a pas d'ordre de lecture évident, elle sera pénible à décrire, ce qui est le signe qu'elle sera aussi pénible à comprendre.

Le cas des infographies interactives

Dès qu'un élément réagit au survol ou au clic, deux exigences s'ajoutent. Le critère 7.3 demande que chaque script soit contrôlable au clavier et par tout dispositif de pointage : une information qui n'apparaît qu'au survol est perdue pour qui navigue au clavier.

<button aria-describedby="tooltip-1">
  Trimestre 1
</button>
<div id="tooltip-1" role="tooltip">
  Ventes : 1,2 million d'euros, en hausse de 15 % sur un an
</div>

Respectez également prefers-reduced-motion sur les transitions, et évitez tout effet de clignotement.

Conclusion

L'accessibilité d'une infographie ne se joue pas dans son attribut alt mais dans la description longue qui l'accompagne, et dans les décisions de conception qui rendent cette description possible. Un visuel pensé pour être décrit est presque toujours un visuel plus clair.

Pour les graphiques de données proprement dits, courbes, barres et camemberts générés à partir de séries, notre article sur l'accessibilité de la data visualization traite le sujet sous l'angle des bibliothèques et du rendu. Et pour vérifier ce que porte réellement votre page, analysez-la : l'absence d'alternative se détecte automatiquement, sa pertinence reste un jugement humain.