Les graphiques et visualisations

Essayez-le

Critères conformes par thématique, audit de mars 2026

Simuler une vision sans les couleurs

Chaque barre couvre les critères applicables de sa thématique : la part en aplat compte les conformes, la part hachurée les non conformes. Formulaires porte à la fois le plus de critères (13) et le moins de conformité (5) ; Images, Tableaux et Navigation dépassent les trois quarts. Sur l'ensemble de l'audit, 25 critères sont conformes sur 38 applicables.

▸ Les données chiffrées

Cochez « simuler une vision sans les couleurs » : le vert et le rouge tombent sur deux gris presque identiques, et ce sont les hachures qui continuent de séparer les deux séries. Puis atteignez « les données chiffrées » à la tabulation et ouvrez-les — c’est là que le graphique devient enfin consultable chiffre par chiffre.

Cette démo existe aussi en page autonome.

L’erreur courante

Une alternative qui décrit le contenant au lieu du contenu.

<!-- À ne pas faire -->
<img src="conformite-mars-2026.png" alt="Graphique en barres" />

L’alternative annonce qu’il y a un graphique. Elle ne dit ni ce qu’il compare, ni ce qu’il montre, ni ce qu’on doit en retenir. C’est l’équivalent d’un paragraphe dont l’alternative serait « un paragraphe » : le lecteur sait qu’il manque quelque chose, et n’a aucun moyen d’aller le chercher.

Le coût est mesurable. Sur la démo ci-dessus, l’information est que Formulaires est la thématique la plus lourde et la moins conforme. Avec alt="Graphique en barres", cette phrase n’existe nulle part sur la page.

Trois variantes, aussi répandues :

• alt="" sur un graphique porteur d’information. L’image est déclarée décorative : plus rien n’est annoncé, et la page a un trou que personne ne voit à la relecture.
• Une alternative qui récite tous les chiffres. Quarante nombres dans une seule phrase se restituent d’un bloc, sans arrêt possible et sans retour en arrière. C’est exactement ce qu’un tableau rend navigable.
• Une légende qui désigne les séries par leur couleur — « les barres rouges sont les non-conformités ». Le test 3.1.2 porte sur ce cas précis : une indication de couleur donnée par un texte.

Le code, pas à pas

1. Écrire le constat avant de dessiner

Un graphique est fait pour prouver une phrase. Écrivez-la d’abord : « les formulaires concentrent les non-conformités », « la courbe se casse en mars », « les deux séries se rejoignent ».

Si cette phrase ne vient pas, le graphique n’a rien à dire — et l’alternative parlera fatalement de sa forme, faute d’autre matière. C’est ce constat, et lui seul, qui part dans l’alternative courte.

2. L’alternative courte : role="img" et le constat

<svg
	role="img"
	aria-label="Formulaires est la thématique la moins conforme : 5 sur 13. Détail dessous."
>
	…
</svg>

Le test 1.1.5 demande les deux ensemble : la balise <svg> porte role="img", et elle a une alternative textuelle. L’un sans l’autre ne suffit pas — et le RGAA note lui-même que les balises <title> et <desc> d’un SVG restent inégalement supportées, d’où la recommandation d’aria-label ou d’aria-labelledby.

Cette alternative fait 75 signes, et ce n’est pas un hasard. Le test 1.3.9 demande qu’une alternative soit « courte et concise », et le glossaire « Alternative courte et concise » précise qu’« une longueur maximale de 80 caractères est fortement recommandée ». Tout ce qui dépasse — le détail des autres thématiques, le total de l’audit, la lecture des écarts — n’est pas perdu : c’est la description détaillée du point 3 qui le porte. Un graphique tient rarement dans 80 signes, et c’est exactement pourquoi le référentiel prévoit deux niveaux plutôt qu’un seul étiré.

Nommer le type de graphique en ouverture — « diagramme en barres » — n’est pas fautif, mais ce n’est pas gratuit : ces vingt signes sortent du même budget, et le lecteur d’écran annonce déjà « image » par le rôle. Gardez-les pour le constat.

La dernière phrase de l’alternative renvoie vers la description détaillée adjacente. Ce n’est pas une politesse : c’est l’une des conditions du test 1.6.5.

Pour une image matricielle servie par une balise <img>, c’est le même contenu dans l’attribut alt (test 1.1.1).

3. La description détaillée, en clair pour tout le monde

<p>
	Chaque barre couvre les critères applicables de sa thématique : la part en
	aplat compte les conformes, la part hachurée les non conformes. Formulaires
	porte à la fois le plus de critères (13) et le moins de conformité (5)…
</p>

Le critère 1.6 admet plusieurs routes : un longdesc, une alternative qui signale une description adjacente, ou « un lien ou un bouton adjacent permettant d’accéder à la description détaillée » — cette dernière route est la plus contraignante, voir le point 4. La description adjacente et visible est la meilleure des trois, pour une raison qui n’est pas d’accessibilité : c’est le texte que tout le monde lit sous un graphique.

Évitez longdesc : le RGAA signale lui-même que l’attribut est « désormais considéré comme obsolète par la spécification HTML en cours », et que sa vérification ne concerne plus que les documents antérieurs à HTML 5.

4. Les données : un tableau, la vraie alternative

Un graphique est le rendu d’un tableau. Rendre le tableau, c’est rendre la source — et avec elle le parcours cellule par cellule, la copie, la recherche dans la page.

<button type="button" aria-expanded="false" aria-controls="donnees-audit">
	Les données chiffrées
</button>

<div id="donnees-audit" hidden>
	<table>
		<caption>Critères conformes et non conformes par thématique, audit de mars 2026</caption>
		…
	</table>
</div>

Ce bouton règle l’objection habituelle : personne ne veut d’un tableau de quarante lignes sous chaque graphique. Mais ne comptez pas sur lui pour remplir le critère 1.6 : le glossaire « Lien ou bouton adjacent » exige qu’il soit adjacent « dans la représentation graphique (CSS activé) et dans le code HTML », où il doit « se situer juste avant ou juste après l’élément auquel il est adjacent ». Un bouton séparé de l’image par une légende et un paragraphe ne remplit pas la condition du test 1.6.5 — c’est l’alternative renvoyant vers la description adjacente qui la remplit, comme dans la démo ci-dessus.

Le hidden compte autant que le bouton, mais pas pour la raison qu’on répète sur les accordéons. Ce tableau ne contient que du texte : aucun élément focalisable, donc rien qui puisse traîner dans l’ordre de tabulation, replié ou non. Ce qui traîne, c’est la restitution — replié par height: 0 ou par une visibility mal posée, le tableau reste dans l’arbre d’accessibilité : un lecteur d’écran le parcourt en mode navigation et la recherche dans la page (Ctrl + F) l’y trouve, pendant que le bouton annonce aria-expanded="false". hidden le retire réellement.

Le tableau lui-même se balise comme les autres : voir les tableaux de données.

5. La couleur n’est jamais le seul canal

Le test 3.1.3 vise chaque image véhiculant une information : celle-ci ne doit pas être donnée uniquement par la couleur. Deux séries en vert et en rouge, sans autre différence, y échouent.

Quatre seconds canaux, du plus robuste au plus discret :

• un motif de remplissage (hachures, pointillés, damier) sur les aplats ;
• un tracé différent pour les courbes (plein, tireté, pointillé) ;
• une forme de marqueur différente (rond, carré, triangle) ;
• une étiquette posée directement sur la série, qui supprime le besoin de légende.

Et la légende nomme le motif, jamais la teinte : « non conformes — hachures », pas « non conformes — en rouge ». Le glossaire est explicite sur ce que vaut ce second canal : « Lorsqu’une information donnée par la couleur est accompagnée d’une autre méthode à destination des utilisateurs qui ne voient pas ou perçoivent mal les couleurs ou leurs associations, le critère sera considéré comme non applicable. »

Le contrôle tient en une ligne de CSS appliquée temporairement au graphique : filter: grayscale(1). Si deux séries deviennent indiscernables, c’est réglé avant d’être audité — c’est ce que fait la case à cocher de la démo.

6. Avez-vous besoin d’un graphique ?

Quatre nombres ne demandent pas un graphique : une phrase ou un tableau les dit mieux, et se copient. Un graphique gagne sa place quand la forme des données est le message — une distribution, une corrélation, une rupture dans une série.

Quand ce n’est pas le cas, le tableau que vous alliez fournir en alternative constitue à lui seul la réponse complète.

Au clavier

Le graphique n’est pas interactif : il ne prend pas le focus, et c’est normal. Ce qui l’entoure, si.

Touche	Effet
Tab	Atteint la case « sans les couleurs », puis le bouton des données. Le graphique lui-même n’est pas un arrêt : il n’y a rien à y actionner.
Espace	Coche ou décoche la case qui a le focus.
Entrée / Espace	Ouvre ou ferme le tableau des données, le focus restant sur le bouton.
Ctrl + Alt + flèches	Parcourt le tableau cellule par cellule, avec NVDA ou JAWS.

Si votre graphique répond au survol — infobulles, sélection d’un point — il cesse d’être une image et devient un composant scripté : le critère 7.3 exige alors que tout s’atteigne aussi au clavier.

Ce que le lecteur d’écran restitue

Sur le graphique : « Formulaires est la thématique la moins conforme : 5 sur 13. Détail dessous, image ». La nature — « image » — vient du rôle, tout le reste vient de l’alternative. Puis vient la description détaillée, lue comme le paragraphe qu’elle est. La formulation change d’un lecteur à l’autre ; les informations, non.

Sur le bouton : « Les données chiffrées, bouton, réduit », puis « développé » après activation.

Le diagnostic inverse est simple :

• Rien du tout en arrivant sur le graphique : le role="img" manque, ou l’image est masquée aux technologies d’assistance.
• Seulement « image » ou « graphique » : l’alternative nomme la forme et pas le constat — c’est le critère 1.3.
• Le constat, mais aucun moyen d’atteindre les chiffres : la description détaillée manque. C’est le critère 1.6, et c’est le défaut le plus fréquent sur les graphiques par ailleurs bien faits.

Checklist

• Écrire le constat en une phrase avant de dessiner quoi que ce soit.
• role="img" sur le <svg>, et une alternative qui porte ce constat.
• Tenir l’alternative sous 80 signes — au-delà, c’est la description détaillée.
• Une description détaillée visible et adjacente, signalée par l’alternative.
• Les données atteignables : un tableau, ou un bouton qui l’ouvre.
• Aucune série distinguée par la seule couleur — motif, tracé, forme ou étiquette.
• Une légende qui nomme le motif, jamais la teinte.
• Vérifier en grayscale(1) avant de livrer.

Les critères RGAA en jeu

• Critère 1.1 — Alternative textuelle des images

  Un graphique est une image porteuse d'information : en SVG, il ne devient une image pour les technologies d'assistance qu'avec un rôle img et une alternative textuelle — le test 1.1.5 exige les deux ensemble.

• Critère 1.3 — Pertinence de l’alternative textuelle

  L'alternative doit apporter l'information du graphique sans nommer sa forme — « diagramme en barres » est ce que ce critère écarte — et rester courte : le test 1.3.9 recommande fortement 80 caractères au maximum, ce qu'une alternative qui récite un audit dépasse toujours.

• Critère 1.6 — Description détaillée des images

  Aucune alternative courte ne contient ce que dit un graphique. Il faut une description détaillée, adjacente et signalée par l'alternative, ou atteignable par un lien ou un bouton placé juste avant ou juste après l'image dans le code.

• Critère 1.7 — Pertinence de la description détaillée

  Une description détaillée qui raconte l'allure des courbes au lieu de rendre les données ne remplace rien : c'est sa pertinence, et non son existence, que ce critère examine.

• Critère 3.1 — Information donnée par la couleur

  Deux séries distinguées par la seule couleur se confondent pour qui ne la perçoit pas, et une légende qui les désigne par leur teinte aggrave le cas au lieu de le régler.

Vérifiez votre composant avec l'extension

Pour aller plus loin

• Critère 1.6 — Description détaillée des images : les routes admises pour rattacher une description à une image, et leurs limites.
• Les tableaux de données : comment baliser le tableau qui sert d’alternative au graphique.
• L’accordéon : le bouton qui dévoile les données, avec son aria-expanded et son panneau vraiment masqué.
• « Description détaillée (image) » au glossaire : la définition qui décide de ce qui compte comme description.
• « Information (donnée par la couleur) » au glossaire : les moyens que le référentiel reconnaît comme second canal.

Sources

• MDN — ARIA img role — le rôle à poser sur un SVG porteur d’information
• WCAG — Understanding 1.1.1 Non-text Content — le pourquoi normatif de l’alternative
• WCAG — Understanding 1.4.1 Use of Color — pourquoi la couleur ne peut pas porter seule une distinction
• W3C WAI Tutorials — Complex Images — l’implémentation de référence pour les graphiques