C'est quoi
Une image complexe est une image dont le contenu ne peut pas se résumer dans un attribut alt court. Exemples : un graphique de données, un diagramme d'architecture, une infographie avec plusieurs niveaux de lecture.
Le critère RGAA 1.6 exige que la description détaillée soit disponible et accessible. Plusieurs techniques valides :
- Texte adjacent visible décrivant l'image dans le corps de la page.
- Un lien adjacent vers une page ou une section contenant la description.
- L'attribut
aria-describedbypointant vers un élément du DOM contenant la description.
L'attribut longdesc HTML4 n'est plus la technique recommandée : son support est inégal selon les combinaisons navigateur et lecteur d'écran.
Qui est touché
- Les personnes aveugles ou malvoyantes qui utilisent un lecteur d'écran : elles perdent toutes les données et conclusions portées par l'image.
- Les personnes avec des difficultés cognitives, pour qui une description textuelle structurée est souvent plus claire qu'un visuel.
- Les utilisateurs dont l'image ne s'est pas chargée (réseau lent, proxy).
Impact business
Un graphique sans description textuelle exclut totalement les utilisateurs de lecteurs d'écran des données qu'il présente. Pour un graphique de résultats ou un schéma de processus métier, c'est une perte d'information critique.
Cette erreur est fréquente dans les rapports et pages de données : le graphique est soigné visuellement, mais les données brutes ne sont jamais exposées sous forme textuelle ou tabulaire.
Comment le détecter
- Audit Mynto : le scan repère les images significatives sans
aria-describedbyet sans texte adjacent structuré. - Manuel : pour chaque graphique ou diagramme, désactive les images dans ton navigateur et relis la page. L'information est-elle compréhensible ?
- Lecteur d'écran : navigue avec NVDA ou VoiceOver et écoute ce qui est annoncé pour chaque image complexe.
Comment corriger
<!-- Graphique sans description détaillée -->
<img src="/graphique-ventes.png"
alt="Ventes par trimestre 2025"><!-- Description détaillée dans un figcaption adjacent -->
<figure>
<img src="/graphique-ventes.png"
alt="Ventes par trimestre 2025">
<figcaption id="desc-graph-ventes">
T1 : 120 k€, T2 : 145 k€, T3 : 187 k€ (+29 % vs T2), T4 : 162 k€.
Progression globale de 35 % sur l'année.
</figcaption>
</figure>La technique la plus robuste est la description adjacente dans un
<figcaption> ou un paragraphe lié via aria-describedby. Elle est visible
de tous les utilisateurs et ne dépend d'aucune API AT spécifique.
Pour un graphique de données, la meilleure description est souvent le tableau
de données source : si tu as les chiffres pour tracer le graphique, expose-les
dans un <table> accessible adjacent.
Sur WordPress, un bloc Tableau Gutenberg positionné sous le graphique est une solution simple et efficace.
Questions fréquentes
Quelle différence entre le critère RGAA 1.6 et le critère 1.3 ?
1.3 demande que l'alt court soit pertinent. 1.6 s'applique quand l'image est trop complexe pour tenir dans un alt court : il exige alors une description détaillée distincte.
L'attribut longdesc est-il encore valide ?
longdesc n'est plus recommandé en RGAA 4.1. Son support est inégal selon les lecteurs d'écran. Préfère aria-describedby avec un élément visible dans la page, ou un lien explicite vers la description.
Est-ce que l'alt peut tenir lieu de description détaillée ?
Non, si l'image est complexe. Un alt contenant deux paragraphes est rarement bien géré par les lecteurs d'écran. Une description séparée dans le DOM est plus fiable et bénéficie aussi à tous les utilisateurs.
À lire aussi
Cette erreur est-elle sur ton site ?
Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.