Quand j'audite un tableau de bord analytics destiné à des équipes non-techniques, je n'évalue pas seulement la beauté des graphiques ou la pertinence des KPIs — je m'assure que chaque utilisateur, quel que soit son profil ou ses capacités, peut comprendre, explorer et agir sur les données. Voici ma checklist détaillée, pratique et actionnable pour rendre un dashboard réellement accessible.

Principes généraux

Avant d'entrer dans les points techniques, je me rappelle toujours ces principes simples : clarté, cohérence et actionnabilité. Un tableau de bord accessible minimise la charge cognitive, propose des chemins clairs pour accomplir des tâches et permet des interactions robustes (au clavier, via lecteur d'écran, sur mobile).

Checklist fonctionnelle (à appliquer page par page)

  • Objectif clair : chaque vue doit avoir un titre explicite et une phrase d'introduction ou un summary indiquant l'objectif et la portée des données.
  • Public cible : indiquer pour qui est la vue (ex. : "Marketing — performance campagne") pour aider le filtrage mental.
  • Granularité et période : prévoir un affichage par défaut logique (ex. 30 jours) et permettre des plages personnalisées facilement accessibles et mémorisables.
  • Actions principales visibles : exporter, partager, sauvegarder les filtres doivent être accessibles et expliqués.

Accessibilité visuelle

  • Contraste des couleurs : vérifier que le texte principal, les labels et les barres/points clés respectent un ratio contraste d'au moins 4.5:1 (WCAG AA) pour le texte normal, et 3:1 pour les éléments graphiques importants. J'utilise parfois l'extension Contrast Checker ou l'outil intégré de Figma.
  • Palette adaptée : éviter de dépendre uniquement des couleurs pour transmettre l'information — ajouter motifs, icônes ou labels explicites.
  • Taille et lisibilité : textes de légende et labels à une taille minimale (souvent 12–14px selon la police), possibilité d'agrandir via le zoom du navigateur sans casse de la mise en page.
  • Focus visible : tous les éléments interactifs (boutons, filtres, cellules cliquables) doivent avoir un état de focus clair visible au clavier.

Navigation et interactions

  • Navigation au clavier : tester la navigation complète (Tab, Shift+Tab, Enter, Espace, flèches) pour s'assurer que tout est atteignable sans souris.
  • Ordre de tabulation logique : l'ordre doit suivre l'ordre visuel et narratif des informations.
  • Raccourcis et aides : proposer des raccourcis clairs (ex. "f" pour ouvrir filtre) et une aide accessible (hint) décrivant ces interactions.
  • Contrôles tactiles : boutons et cibles tactiles suffisamment grands sous mobile (minimum 44x44px recommandé).

Compatibilité avec lecteurs d'écran

  • Landmarks et titres : utiliser des balises sémantiques (header, main, nav, region ou role) et des titres hiérarchisés pour faciliter la navigation via lecteur d'écran.
  • Labels explicites : chaque filtre, contrôle ou graphique interactif doit avoir un label ARIA (aria-label / aria-labelledby) descriptif.
  • Rôles des éléments : pour les charts interactifs, indiquer role="img" avec aria-labelledby/aria-describedby pointant vers un texte de description.
  • Lecteur d'écran et résumés : fournir un résumé textuel des insights clés (ex. "Chiffre d'affaires en hausse de 12% vs la semaine précédente") plutôt que d'obliger l'utilisateur à parcourir tous les points d'un graphique.

Accessibilité des visualisations de données

  • Alternatives textuelles : chaque graphique doit avoir une description textuelle (chart summary) expliquant la tendance et les points saillants.
  • Tabulation sur points de données : permettre de tabuler sur les points/barres/segments avec des tooltips accessibles (texte lu par le lecteur d'écran) contenant valeur, label, période.
  • Choix des types de graphiques : préférer des types lisibles (barres, lignes) plutôt que des pie charts complexes; pour des proportions, toujours proposer un tableau de données en alternative.
  • Descriptions des axes : axes étiquetés clairement, unité mentionnée (€, %, visiteurs), et format cohérent des nombres.

Formulaires, filtres et contrôles

  • Étiquettes et instructions : labels visibles et instructions pour les champs complexes (ex. "sélection multiple — appuyez sur Entrée pour ajouter").
  • Options accessibles : les dropdowns et datepickers doivent fonctionner au clavier et être lisibles par lecteur d'écran (éviter les composants qui détruisent la structure DOM).
  • Feedback et erreurs : messages d'erreur accessibles (aria-live) et suggestions pour corriger une sélection invalide.
  • Préférences mémorisées : option pour enregistrer des vues ou filtres récurrents, utile pour les utilisateurs qui comptent sur configurations stables.

Export, partage et intégration

  • Export accessible : exports CSV/Excel correctement formatés, avec en-têtes clairs et métadonnées (timezone, période).
  • Formats alternatifs : proposer PDF/text summary ou versions imprimables bien structurées (marges, titres, alt text sur images).
  • API et accessibilité : si une API alimente le dashboard, documenter des endpoints pour récupérer des données brutes, utile aux utilisateurs préférant leur propre outil d'analyse.

Onboarding et documentation intégrée

  • Guides pas-à-pas : tutoriels interactifs accessibles (keyboard-friendly), avec possibilité de masquer/afficher les étapes.
  • Glossaire : expliquer le vocabulaire métier et les métriques (ex. "Sessions vs Utilisateurs").
  • Aide contextuelle : icônes d'information avec texte accessible plutôt que seules popovers visuels.

Tests pratiques et outils

  • Tests manuels : parcourir le dashboard uniquement au clavier, puis avec NVDA/VoiceOver, et noter les points de friction.
  • Outils automatisés : utiliser axe DevTools, WAVE, Lighthouse pour détecter problèmes de contraste, labels manquants, roles ARIA.
  • Utilisateurs réels : organiser des sessions avec des utilisateurs non-techniques et, si possible, des personnes en situation de handicap pour observer l'utilisation réelle.
  • Check de performance : optimiser temps de chargement; un dashboard lent est une barrière d'accessibilité pour beaucoup d'utilisateurs.

Table récapitulative — vérification rapide

Vérification Pourquoi Comment tester
Title & summary Donne le contexte rapidement Lire la page avec un lecteur d'écran ; vérifier présence d'un summary
Contraste couleurs Lisibilité pour malvoyants Outil Contrast Checker → ratio >= 4.5:1
Navigation clavier Utilisabilité sans souris Parcourir avec Tab/Enter ; vérifier focus visible
Descriptions graphiques Compréhension pour lecteurs d'écran Vérifier aria-describedby; résumés textuels
Exports lisibles Permet travail hors interface Ouvrir CSV/Excel ; vérifier en-têtes et format

En pratique, j'aime combiner ces vérifications dans un template d'audit que je réutilise sur chaque projet. Cela me permet non seulement d'identifier les problèmes évidents, mais aussi d'argumenter des priorités : ce qui doit être corrigé immédiatement (accessibilité fondamentale), ce qui peut être amélioré progressivement (UX fine) et ce qui relève d'une feuille de route produit (fonctionnalités avancées).

Si vous voulez, je peux vous fournir ce template d'audit sous forme de checklist téléchargeable (CSV ou Google Sheet) adapté à votre dashboard, ou parcourir un exemple concret comme Google Analytics, Power BI ou Tableau pour montrer comment appliquer ces règles dans la vraie vie.