📊 Accessibilité des graphiques et des légendes
Cette page décrit les bonnes pratiques pour garantir que les graphiques et leurs légendes soient accessibles à tous les utilisateurs, en conformité avec le RGAA. Elle couvre l’usage des couleurs, des motifs, des contrastes, des contours, des espaces, ainsi que des alternatives textuelles.
🎯 Objectifs
- Rendre les données visuelles compréhensibles par tous.
- Permettre l’accès aux informations, quelles que soient les capacités visuelles ou les moyens de navigation.
- S’assurer du respect des critères RGAA applicables.
✅ Les critères RGAA à retenir
|
RGAA |
Règle |
Application |
|---|---|---|
|
1.1 / 1.6 |
Chaque image informative doit avoir une alternative textuelle |
Ajouter un texte alternatif ou une description détaillée (tooltip, aria-describedby, etc.) |
|
3.1 |
L'information ne doit pas être donnée uniquement par la couleur |
Utiliser des motifs, formes, ou textes pour différencier les éléments |
|
3.3 |
Les couleurs doivent présenter un contraste suffisant |
Rapport de contraste ≥ 3:1 entre l’élément et son fond |
|
4.8 |
Chaque média non temporel doit avoir une alternative |
Fournir un résumé textuel du graphique ou un lien vers les données tabulaires |
🖍️ Couleurs
🎨 Règles d’usage
- Utiliser des couleurs avec un ratio de contraste ≥ 3:1 pour les éléments graphiques porteurs d'information.
- Ne jamais signifier l'information uniquement par la couleur (ex. : rouge = erreur, vert = succès).
- Les couleurs utilisées doivent être issues du design system.
💡 Astuce : renforcer la lisibilité
- Si une couleur claire est utilisée (ex. : gris clair), ajouter un contour foncé pour améliorer le contraste.
- Éviter les tons pastel non contrastés.
🧵 Motifs et patterns
Lorsque plusieurs éléments visuels sont à distinguer :
- Utiliser des motifs de remplissage (lignes, points, hachures) pour chaque catégorie.
- Associer chaque motif à une légende claire.
Cela renforce la compréhension pour les personnes daltoniennes ou en cas de faible contraste.
📏 Espacements et lisibilité
- Séparer les éléments visuellement (barres, segments, points) pour éviter tout chevauchement.
- Respecter une marge minimale autour de chaque valeur.
- Ne pas superposer du texte sur des zones de faible contraste (fond ou autre élément graphique).
🧰 Contours
- Appliquer des contours épais et contrastés pour :
- distinguer des zones adjacentes (ex. : graphiques en anneau ou cartes),
- améliorer la visibilité des petits éléments (points, symboles),
- renforcer les éléments actifs ou interactifs.
- Les doubles contours peuvent être utilisés si nécessaire.
🗣️ Alternatives textuelles et légendes
- Fournir une légende complète, claire, lisible et positionnée à proximité du graphique.
- Si l’espace est restreint, ajouter un bouton "Voir les données" ou afficher les détails au survol/clic via un tooltip.
- Pour des données complexes, ajouter une description narrative à côté du graphique.
🧩 Interactivité
- Une interaction clavier doit permettre d'accéder à toutes les parties du graphique (focusable).
- Le focus visuel doit être clair.
- Exemples :
- Clic sur la légende pour filtrer ou mettre en surbrillance une série.
- Survol ou tabulation pour déclencher un tooltip descriptif.
📚 Exemples
❌ Mauvais exemple
- Graphique en anneau sans légende, aux couleurs peu contrastées, sans motif.
- Informations chevauchées et illisibles.
✅ Bon exemple
- Graphique avec motifs + couleurs contrastées.
- Légende lisible, interaction au clic, description textuelle détaillée disponible.
- exemple avec des cartes
🧭 Checklist accessibilité (à intégrer dans vos audits)
- Tous les éléments sont lisibles (contrastes, espacements).
- Une alternative textuelle est fournie (description ou données).
- Les informations ne sont pas données uniquement par la couleur.
- Les éléments interactifs sont accessibles au clavier.
- Les éléments ont un focus clair et visible.
- La légende est explicite et visible.