Tableaux de bord et graphiques accessibles

L’erreur la plus fréquente tient en une ligne de légende : vert pour « dans les objectifs », rouge pour « en retard ». Pour une personne qui ne distingue pas ces deux couleurs, et c’est le cas d’une part notable des hommes, le tableau de bord ne dit plus rien. L’accessibilité des tableaux de bord commence par ce type de détail, et va jusqu’aux graphiques interactifs que l’on ne peut pas parcourir au clavier.

Ce guide applique les règles des WCAG 2.2, reprises en France par le RGAA, aux tableaux de bord et aux graphiques. Il vise les équipes qui conçoivent des outils de pilotage internes comme celles qui publient des données au public.

Les quatre règles qui couvrent l’essentiel

1. La couleur ne doit jamais être seule

Le critère 1.4.1 des WCAG l’exprime simplement : la couleur ne doit pas être le seul moyen de transmettre une information. Un statut se double d’un texte ou d’une icône ; une série de courbes se distingue aussi par des motifs, des formes de points ou des étiquettes posées directement au bout des lignes.

2. Les éléments graphiques doivent contraster

Le texte doit respecter un contraste d’au moins 4,5 pour 1 avec son fond (critère 1.4.3). Les barres, les secteurs, les lignes et les icônes porteuses de sens doivent atteindre 3 pour 1 avec les couleurs voisines (critère 1.4.11). Les palettes pastel, très répandues, échouent souvent à ce second critère. Une fine bordure entre secteurs ou entre barres adjacentes règle une partie du problème.

3. Chaque graphique a une alternative

Un graphique est une image pour un lecteur d’écran. Il lui faut une alternative qui transmet la même information (critère 1.1.1). La meilleure combinaison tient en deux éléments : une phrase de résumé qui dit ce que le graphique montre (« Les demandes ont doublé entre mars et juin, puis se sont stabilisées »), et un accès aux données sous forme de tableau structuré, avec des en-têtes de lignes et de colonnes.

Le résumé sert à tout le monde, pas seulement aux personnes aveugles : il dit au lecteur pressé ce qu’il doit retenir. S’il est difficile à écrire, c’est souvent que le graphique ne montre rien de clair.

4. Tout doit fonctionner au clavier

Filtres, sélecteurs de période, onglets, infobulles : chaque interaction doit être possible au clavier (critère 2.1.1), avec un indicateur de focus visible (critère 2.4.7). Une infobulle qui n’apparaît qu’au survol de la souris est inaccessible ; elle doit aussi apparaître au focus, rester affichée tant qu’on en a besoin et pouvoir être fermée sans déplacer le focus (critère 1.4.13).

Concevoir l’écran, étape par étape

1. Écrire d’abord les messages. Pour chaque bloc, une phrase : ce que l’utilisateur doit comprendre. Elle deviendra le titre ou le résumé.
2. Choisir la forme la plus simple. Un chiffre clé avec sa variation se lit mieux qu’une jauge. Une barre se compare mieux qu’un secteur.
3. Choisir une palette vérifiée en contraste et en distinction des couleurs, puis ajouter motifs ou étiquettes directes.
4. Structurer la page : titres hiérarchisés, régions nommées, ordre de lecture logique. Un utilisateur de lecteur d’écran navigue par titres.
5. Prévoir les alternatives : résumé visible, tableau de données accessible par un bouton ou un onglet, export dans un format ouvert.
6. Annoncer les mises à jour : quand un filtre change les chiffres, une zone d’annonce discrète (région ARIA « live ») informe le lecteur d’écran que le contenu a changé.
7. Tester au clavier seul, avec un lecteur d’écran, à 200 % d’agrandissement et sur un écran étroit.

Les pièges des outils du marché

Les outils de tableaux de bord et les bibliothèques de graphiques progressent, mais leurs réglages par défaut sont rarement conformes. Les problèmes habituels : graphiques rendus dans un élément canvas sans alternative, palettes par défaut trop pâles, filtres construits avec des éléments non natifs sans rôle ni nom accessible, infobulles réservées à la souris.

Liste de contrôle

• Aucune information n’est portée par la couleur seule.
• Le texte atteint 4,5 pour 1 de contraste ; les éléments graphiques, 3 pour 1.
• Chaque graphique a un titre, un résumé et un accès aux données en tableau.
• Filtres, onglets et infobulles fonctionnent au clavier, avec un focus visible.
• Les changements de contenu sont annoncés aux lecteurs d’écran.
• L’écran reste utilisable à 200 % et sur mobile.
• Un test avec un lecteur d’écran a été fait sur la version finale.

Ces règles font partie de l’expertise web accessible de DOSOBE. Pour le cadre général et les obligations, voir le dossier complet sur l’accessibilité numérique.

Questions fréquentes

Les graphiques doivent-ils respecter le RGAA ?

Oui. Un graphique est un contenu non textuel : il doit avoir une alternative qui transmet la même information. Les éléments graphiques porteurs de sens doivent aussi respecter un contraste d'au moins 3 pour 1 avec les couleurs voisines, selon les WCAG 2.2 reprises par le RGAA.

Un tableau de données suffit-il comme alternative ?

Pour transmettre les valeurs, oui, s'il est bien structuré (en-têtes de lignes et de colonnes). Il gagne à être précédé d'une phrase qui dit ce que le graphique montre : la tendance, l'écart, le point marquant.

Les bibliothèques de graphiques sont-elles accessibles ?

Certaines proposent des options d'accessibilité (description, navigation au clavier, motifs). Aucune ne rend un graphique accessible sans travail : il faut configurer, rédiger les résumés et tester.