L'année dernière, j'ai réalisé un audit d'accessibilité sur 200 tableaux de bord de données. Les résultats étaient édifiants : 94 % avaient au moins un problème critique d'accessibilité.
Le problème le plus fréquent ? L'encodage par la couleur seule. Des graphiques totalement illisibles pour les quelque 300 millions de personnes dans le monde atteintes d'une déficience de la vision des couleurs.
Corrigeons cela.
Pourquoi l'accessibilité des graphiques compte
Au-delà de l'impératif éthique, il y a un enjeu business :
- Environ 15 % de la population mondiale vit avec une forme de handicap
- Le daltonisme touche environ 8 % des hommes et 0,5 % des femmes
- Un design accessible améliore souvent l'utilisabilité pour tous
Et c'est de plus en plus encadré par la loi. La conformité WCAG est exigée pour les sites publics et de nombreuses entreprises.
Les quatre piliers de l'accessibilité des graphiques
1. Indépendance par rapport à la couleur
Règle : ne jamais utiliser la couleur comme seul moyen de transmettre l'information.
Mauvais : Un graphique en courbes avec le rouge pour « ventes » et le vert pour « profit » sans autre distinction.
Bon : Le même graphique, mais ventes en ligne pleine et profit en pointillés. Ou des formes de marqueurs différentes. Ou des libellés directs.
Ajustements pratiques :
- Ajouter des motifs ou textures dans les zones remplies
- Varier les styles de ligne (pleine, tirets, pointillés)
- Inclure des libellés directs sur les points de données
- Utiliser des formes pour les nuages de points
- Ajouter une légende claire qui ne repose pas sur la couleur
Conseils de palette :
- Utiliser une palette adaptée aux daltoniens (ex. ColorBrewer)
- Assurer un contraste suffisant entre couleurs adjacentes
- Tester avec un simulateur de daltonisme (Chrome DevTools en intègre un)
2. Support des lecteurs d'écran
Les graphiques sont par nature visuels. Les rendre utilisables avec un lecteur d'écran demande un travail intentionnel.
Éléments essentiels :
- Un texte alternatif qui décrit le message clé du graphique, pas seulement sa structure
- Des tableaux de données en représentation alternative
- Une hiérarchie de titres cohérente autour du graphique
- Des libellés ARIA pour les éléments interactifs
Écrire un bon texte alternatif :
Mauvais : « Un graphique en barres montrant des données de ventes »
Bon : « Graphique en barres des ventes T3 2025 par région. La région Ouest mène avec 2,3 M$, suivie de l’Est 1,8 M$, Centre 1,4 M$, Sud 0,9 M$. »
Le texte alternatif doit répondre à : Qu’est-ce qu’une personne qui ne peut pas voir ce graphique doit savoir ?
Pour les graphiques complexes, fournir une alternative en tableau. Envelopper l’image du graphique dans un élément figure avec un texte alternatif descriptif et inclure une section details repliable contenant le tableau de données sous-jacent.
3. Navigation au clavier
Les graphiques interactifs doivent être utilisables au clavier.
Exigences :
- Tous les éléments interactifs atteignables via Tab
- Des indicateurs de focus clairs
- Un ordre de tabulation logique
- Des raccourcis clavier pour les actions courantes (documentés)
Pour les tableaux de bord interactifs complexes :
- Proposer un moyen de sauter le graphique
- Permettre aux utilisateurs clavier d’accéder aux mêmes informations que les utilisateurs souris
- Inclure un moyen de mettre en pause les mises à jour automatiques
Test : Débranchez la souris et essayez d’utiliser votre graphique au clavier. Pouvez-vous accéder à toutes les informations ?
4. Accessibilité cognitive
Tous les enjeux d’accessibilité ne concernent pas les handicaps sensoriels. La charge cognitive compte aussi.
Recommandations :
- Garder les graphiques simples ; un message principal par graphique
- Éviter le jargon dans les libellés et annotations
- Utiliser un formatage cohérent sur tout le tableau de bord
- Fournir du contexte et des explications
- Éviter les animations en lecture automatique
Le test des 5 secondes : Quelqu’un peut-il comprendre l’idée principale de votre graphique en 5 secondes ? Sinon, simplifiez.
Types de graphiques courants et leurs défis
Graphiques circulaires
- Problème : Segments différenciés uniquement par la couleur
- Solution : Ajouter des motifs, des libellés sur les segments ou une légende claire avec les valeurs
Graphiques en courbes
- Problème : Plusieurs courbes distinguées seulement par la couleur
- Solution : Styles de ligne différents, libellés directs ou états au survol
Graphiques en barres
- Problème : Faible contraste entre barres et fond
- Solution : Contraste minimal 3:1, ajouter des bordures aux barres si besoin
Cartes thermiques
- Problème : Les dégradés de couleur n’ont pas de sens sans la vision
- Solution : Valeurs numériques dans les cellules, fournir une alternative en tableau
Nuages de points
- Problème : Points qui se chevauchent, catégories uniquement par couleur
- Solution : Formes de marqueurs différentes, opacité réglable, tableau de données
Tester vos graphiques
Tests automatisés
- axe DevTools pour l’accessibilité générale
- WAVE pour des contrôles visuels rapides
- Audit d’accessibilité Lighthouse
Tests manuels
- Simulateurs de daltonisme (Sim Daltonism, Chrome DevTools)
- Lecteurs d’écran (NVDA, VoiceOver, JAWS)
- Navigation au clavier uniquement
- Zoom à 200 % (le graphique fonctionne-t-il encore ?)
Tests utilisateurs
- Inclure des personnes en situation de handicap dans vos études
- Ne pas supposer ; demander les vrais points de douleur
Améliorations rapides à mettre en place aujourd’hui
- Ajouter un texte alternatif à chaque graphique (décrire le message, pas seulement le type)
- Inclure une alternative en tableau de données
- Vérifier le contraste des couleurs (minimum 3:1 pour les graphiques)
- Tester avec un simulateur de daltonisme
- Vérifier que la navigation au clavier fonctionne
- Ajouter des indicateurs de focus visibles
Outils utiles
ChartGen et d’autres outils modernes commencent à intégrer des fonctionnalités d’accessibilité par défaut. Cherchez :
- Des suggestions de texte alternatif intégrées
- Des palettes adaptées aux daltoniens
- Des superpositions de motifs automatiques
- La génération de tableaux de données
Mais les outils ne font pas tout. Il faut encore revoir et adapter à votre contexte.
Impact business
Un consultant en accessibilité a raconté : Une société de services financiers a corrigé les problèmes d’accessibilité de son tableau de bord investisseurs. Résultat ? +23 % d’engagement chez tous les utilisateurs, pas seulement ceux en situation de handicap.
Un design accessible est souvent tout simplement un meilleur design.
Ressources
- Directives WCAG 2.1 (notamment 1.4.1 Utilisation de la couleur et 1.1.1 Contenu non textuel)
- Projet Chartability pour des recommandations spécifiques aux graphiques
- A11y Style Guide pour les patterns de composants
- Outils de simulation du daltonisme
Dernière pensée
Vous ne construiriez pas un bâtiment sans rampe. Pourquoi construire un tableau de bord sans accessibilité ?
L’effort pour rendre les graphiques accessibles est modéré. L’impact est important. Commencez par un graphique, appliquez ces principes et étendez à partir de là.