Image porteuse d'information

Une image porteuse d'information est une image dont le retrait ferait perdre du sens à la page. Elle transmet un contenu que le texte environnant ne fournit pas. Le RGAA et les WCAG exigent qu'elle porte une alternative textuelle décrivant l'information véhiculée, pas l'apparence de l'image.

Un graphique de ventes sans alternative textuelle, pour un lecteur d'écran, c'est un trou dans la page. L'utilisateur sait qu'une image existe. Il ne sait pas ce qu'elle dit.

#Comment distinguer une image informative d'une image décorative ?

Retirez mentalement l'image. Si le lecteur perd une information, elle est porteuse d'information. Si rien ne change, c'est de la décoration.

Le piège : la réponse dépend du contexte. Une photo de montagne en bandeau d'un blog voyage est décorative quand le texte mentionne déjà le lieu. La même photo dans un guide de randonnée, sans légende, devient informative. Le glossaire du RGAA le formule autrement : est porteuse d'information toute image qui « véhicule une information nécessaire à la compréhension du contenu auquel elle est associée ». Le W3C propose un arbre décisionnel qui formalise ce raisonnement.

#Décrire l'information, pas l'apparence

L'erreur la plus répandue : écrire ce qu'on voit au lieu de ce que l'image communique.

<!-- Mauvais : décrit l'apparence -->
<img src="graph.png" alt="Graphique avec des barres bleues et rouges">
 
<!-- Bon : décrit l'information -->
<img src="graph.png" alt="Ventes en hausse de 25 % au troisième trimestre 2025">

Une icône de téléphone suivie d'un numéro reçoit alt="Téléphone :", pas alt="icône bleue de téléphone". Un logo d'organisation dans un lien reçoit le nom de l'organisation. Le tutoriel du W3C sur les images informatives détaille ces cas.

Pour les images complexes (graphiques de données, infographies), le alt seul ne suffit pas. Le critère 1.1.1 des WCAG demande alors un texte alternatif court qui identifie l'image, complété par une description détaillée à proximité ou via longdesc.

#Les SVG informatifs, ces oubliés

Un <svg> inline n'a pas d'attribut alt. Quand il porte une information, il faut compenser :

<svg role="img" aria-label="Taux de satisfaction : 92 %">
  <title>Taux de satisfaction : 92 %</title>
  <!-- … -->
</svg>

Sans role="img", certains navigateurs ne restituent pas le <title> aux technologies d'assistance. Le WebAIM Million 2025 relève que 55,5 % des pages d'accueil présentent au moins un problème d'alternative textuelle manquante. Les SVG informatifs oubliés y contribuent.

#En résumé

Si retirer l'image fait perdre de l'information, c'est une image porteuse d'information. Décrivez ce qu'elle communique, pas ce qu'elle montre. Et pour les SVG : pas de alt natif, mais role="img" et aria-label font le travail.