Quand une image contient beaucoup d'informations — graphique, carte, organigramme — un texte reprend-il toutes ces informations en détail ?
Critère officiel 1.6 — Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?
Pourquoi c'est important
Une carte des travaux en cours ou un graphique du budget municipal contient des données précises qu'une courte description ne peut pas résumer. Sans texte détaillé, une personne aveugle perd l'ensemble de ces informations.
Exemples concrets
Ce qui est conforme
La carte des chantiers en cours est accompagnée d'un tableau listant chaque chantier avec sa localisation, la nature des travaux et la période estimée. Toute l'information de la carte est disponible sans la voir.
Ce qui pose problème
Le graphique du budget communal est décrit uniquement par « Graphique du budget 2024 ». Les montants précis, la répartition par poste, les comparaisons avec l'année précédente ne sont accessibles qu'en regardant l'image.
Comment agir
Dans WordPress, deux emplacements sont possibles : le champ « Description » de la médiathèque (accessible via Médias → cliquer sur l'image), ou un bloc de texte placé juste après l'image dans la page. Le champ Description est préférable pour les graphiques réutilisés sur plusieurs pages ; le bloc de texte suffit pour une image ponctuelle.
Règles clés
- L'alt résume le message principal. La description détaillée donne toutes les données.
- Méthodes RGAA : description dans un élément adjacent (aria-describedby), <details> adjacent, ou lien vers une page dédiée.
- Un tableau HTML est souvent la meilleure description détaillée pour un graphique de données.
Erreurs fréquentes
- Graphique complexe avec un alt superficiel sans les données précises
- Description détaillée présente mais sur une autre page sans lien adjacent
- Infographie sans aucune alternative textuelle structurée
Exemples de code
graphique sans description détaillée
✗ Non conforme<img src="budget-2024.png"
alt="Répartition du budget municipal 2024">L'alt indique le sujet mais pas les données. Les pourcentages et montants sont inaccessibles.
graphique avec description détaillée via details
✓ Conforme<figure>
<img src="budget-2024.png"
alt="Budget municipal 2024 — tableau détaillé ci-dessous"
aria-describedby="desc-budget">
<figcaption>Budget municipal 2024</figcaption>
</figure>
<details id="desc-budget">
<summary>Données du graphique</summary>
<table>
<caption>Répartition du budget municipal 2024</caption>
<thead><tr>
<th scope="col">Poste</th>
<th scope="col">Montant</th>
<th scope="col">Part</th>
</tr></thead>
<tbody>
<tr><th scope="row">Éducation</th><td>2,4 M€</td><td>38%</td></tr>
<tr><th scope="row">Voirie</th><td>1,9 M€</td><td>30%</td></tr>
<tr><th scope="row">Culture</th><td>1,0 M€</td><td>16%</td></tr>
<tr><th scope="row">Autres</th><td>1,0 M€</td><td>16%</td></tr>
</tbody>
</table>
</details>L'alt oriente vers la description. Le tableau dans <details> fournit toutes les données structurées. aria-describedby lie programmatiquement l'image à sa description.
Référence WCAG : 1.1.1