Chapitre 8.3 — Images complexes

⏱️ TL;DR — Un graphique, un schéma, une infographie, une carte : un alt d’une phrase ne peut pas restituer autant d’information. Il faut une description longue. Trois moyens : un texte adjacent visible (le mieux), un aria-describedby qui pointe vers ce texte, ou — quand l’image porte des données — un tableau équivalent. La règle qui ne bouge pas : l’information contenue dans l’image doit exister aussi sous forme textuelle quelque part sur la page. Toujours au titre du critère 1.1.1.

🎯 Objectifs

• Reconnaître une image complexe (graphique, schéma, infographie, carte).
• Fournir une description longue par texte adjacent, aria-describedby, ou tableau.
• Convertir un graphique de données en tableau équivalent.
• Garder le principe : l’info visuelle doit avoir un équivalent textuel accessible.

Pourquoi un alt ne suffit pas

Le alt est fait pour une alternative courte — une phrase. Un graphique en barres avec dix séries, un schéma d’architecture, une carte de résultats : impossible à condenser en une phrase sans perdre l’information. Bourrer le alt de trois lignes de chiffres est illisible à l’écoute (le lecteur d’écran débite tout d’un bloc, sans navigation possible).

La solution : un alt court qui annonce ce qu’est l’image et renvoie à la description, plus une description longue ailleurs, structurée et navigable.

<!-- ❌ Tout entassé dans le alt : illisible à l'écoute -->
<img src="ventes.png" alt="Graphique en barres. Janvier 12000. Février 15000. Mars 9000. Avril 22000. Mai 18000. Juin 25000. Progression globale de 108 pourcent sur le semestre avec un creux en mars.">

Moyen 1 — Le texte adjacent (le plus simple, le plus robuste)

La meilleure description longue est un vrai texte visible à côté de l’image, utile à tout le monde — voyants compris. Le alt reste court et pointe vers ce texte.

<!-- ✅ alt court + description visible pour tous -->
<figure>
  <img src="ventes.png" alt="Ventes mensuelles du 1er semestre 2026, détaillées ci-dessous.">
  <figcaption>
    Les ventes progressent de 108 % sur le semestre : 12 000 € en janvier,
    un creux à 9 000 € en mars, puis un pic à 25 000 € en juin.
  </figcaption>
</figure>

Moyen 2 — aria-describedby

Si tu ne veux pas montrer la description à tout le monde (rare, mais parfois voulu), tu peux la placer dans un élément et la lier à l’image via aria-describedby. Le lecteur d’écran lit alors le alt (nom), puis la description associée.

<!-- ✅ Description longue liée par aria-describedby -->
<img src="archi.png"
     alt="Schéma d'architecture d'A11yLearn."
     aria-describedby="desc-archi">
 
<p id="desc-archi">
  Le front Next.js appelle une API Node, qui lit Moodle pour les contenus
  et une base Postgres pour les inscriptions. Un CDN sert les médias.
</p>

Préfère quand même une description visible : elle profite aux personnes dyslexiques, à celles qui zooment, et à quiconque préfère lire plutôt que décrypter un schéma.

Moyen 3 — Le tableau de données (pour les graphiques)

Quand l’image est un graphique de données (barres, courbes, camembert), le meilleur équivalent n’est pas de la prose, c’est le tableau des données sources. Un tableau est navigable cellule par cellule au lecteur d’écran, triable mentalement, et exact.

<!-- ✅ Le graphique reste pour les voyants ; le tableau porte les données -->
<img src="ventes.png" alt="Ventes mensuelles du 1er semestre 2026, données dans le tableau ci-dessous.">
 
<table>
  <caption>Ventes mensuelles, 1er semestre 2026 (en euros)</caption>
  <thead>
    <tr><th scope="col">Mois</th><th scope="col">Ventes</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Janvier</th><td>12 000</td></tr>
    <tr><th scope="row">Février</th><td>15 000</td></tr>
    <tr><th scope="row">Mars</th><td>9 000</td></tr>
    <tr><th scope="row">Avril</th><td>22 000</td></tr>
    <tr><th scope="row">Mai</th><td>18 000</td></tr>
    <tr><th scope="row">Juin</th><td>25 000</td></tr>
  </tbody>
</table>

Bonus : offrir le tableau, c’est aussi rendre la donnée copiable et exploitable pour tout le monde. Beaucoup de sites proposent d’ailleurs un bouton « Afficher les données » sous leurs graphiques.

💡 Réflexe — Face à une image complexe, demande-toi : « Si je retirais l’image, l’information serait-elle encore là ? » Si la réponse est non, c’est que l’info n’existe que visuellement — donc inaccessible à une partie de tes utilisateurs. La description longue ou le tableau, c’est ce qui rend la réponse oui. L’image devient un confort visuel, plus le seul canal de l’information.

Le cas des cartes et schémas interactifs

Une carte (résultats par région, itinéraire) ou un schéma cliquable pose le même problème en pire : l’info est spatiale. L’équivalent textuel est souvent une liste ou un tableau structurés (« Île-de-France : 42 %, Bretagne : 18 %… ») plus utiles que toute description de formes. Pour un itinéraire, la liste des étapes textuelles vaut mieux qu’un tracé.

♿ Côté utilisateur — Devant un joli camembert sans alternative, un utilisateur de lecteur d’écran n’a rien : ni les parts, ni les étiquettes, ni le total. Avec le tableau associé, il tabule dans les cellules, entend « Mars, 9 000 euros », compare, comprend la tendance. Il accède à la donnée, pas à une vague description de couleurs de camembert. C’est la différence entre « il y a un graphique » et « voici ce que dit le graphique ».

🧭 Sur A11yLearn — Le tableau de bord d’un formateur affiche un graphique de progression des apprenants. On a ajouté sous chaque graphique un <table> avec <caption> reprenant les mêmes chiffres (nom de l’apprenant, % de complétion, dernière activité), masquable par un bouton « Voir les données » pour ne pas alourdir l’écran. Le graphique sert la lecture rapide ; le tableau porte la vérité des données, accessible au lecteur d’écran comme au copier-coller.

📚 Aller plus loin — Le W3C documente les « Complex images » dans ses tutoriels sur w3.org/WAI/tutorials/images/complex/ : patterns de description longue, exemples de graphiques et de diagrammes. Utile pour choisir entre texte adjacent et tableau selon le type d’image.

✏️ Exercices

Exercice 1 — Quelle alternative ? Pour chaque image complexe, dis quel équivalent textuel tu fournis : (a) une courbe d’évolution du chiffre d’affaires sur 12 mois, (b) un organigramme d’entreprise, (c) une infographie « 5 étapes pour t’inscrire ».

Exercice 2 — Corrige. Un graphique en barres a ce balisage. Améliore-le.

<img src="stats.png" alt="Graphique">

<img src="stats.png" alt="Répartition des inscriptions par module, données ci-dessous.">
<table>
  <caption>Inscriptions par module</caption>
  <thead><tr><th scope="col">Module</th><th scope="col">Inscrits</th></tr></thead>
  <tbody>
    <tr><th scope="row">HTML</th><td>320</td></tr>
    <tr><th scope="row">React</th><td>210</td></tr>
    <tr><th scope="row">A11y</th><td>180</td></tr>
  </tbody>
</table>

🧠 Quiz de révision

Chapitre suivant : Vidéo & audio — sous-titres, transcription et audiodescription pour le média temporel.