Créer des graphiques accessibles à tous

Le problème des graphiques

Les graphiques et diagrammes sont par nature des objets visuels. Ils encodent l’information par la forme, la position et la couleur — trois canaux qui sont soit dénués de sens, soit déformés pour une part importante de votre audience.

Environ 8 % des hommes présentent une forme de déficience de la vision des couleurs. Les utilisateurs de lecteurs d’écran ne reçoivent aucune information exploitable d’un graphique en barres SVG, sauf si le développeur l’a explicitement fournie. Et les utilisateurs au clavier trouvent souvent les graphiques interactifs totalement inaccessibles.

Le résultat : la visualisation de données est probablement le domaine du design web où l’écart entre ce que vivent les utilisateurs voyants et ce que vit tout le monde est le plus grand. Et c’est un écart que les organisations remarquent rarement, car les audits d’accessibilité se concentrent sur les formulaires et la navigation avant d’arriver aux graphiques de la page de rapports.

Ce guide couvre ce qu’exige réellement une visualisation de données accessible — pas une liste de contrôle, mais une compréhension des raisons pour lesquelles les graphiques échouent et de ce qu’il faut faire pour y remédier.

Pourquoi les graphiques sont particulièrement difficiles

La plupart des éléments HTML ont un rôle, un nom et un état natifs que les technologies d’assistance comprennent. Un <button> est un bouton. Un <table> est un tableau avec des lignes et des colonnes. Un champ de formulaire a une étiquette.

Un graphique rendu en SVG ou en canvas n’a rien de tout cela. C’est un dessin. Les lecteurs d’écran voient une image (avec un peu de chance) ou rien du tout. Le développeur doit reconstruire la couche sémantique à partir de zéro.

Dans le même temps, les graphiques constituent souvent le contenu le plus important d’une page. Un graphique en barres montrant le chiffre d’affaires mensuel, une courbe suivant la croissance des utilisateurs, un diagramme circulaire détaillant la répartition par catégorie — c’est souvent pour cela que l’utilisateur est sur la page. En exclure une part importante des visiteurs est un problème sérieux, pas un désagrément mineur.

Le problème de la couleur : ne jamais s’appuyer sur la couleur seule

Le défaut d’accessibilité le plus courant dans les graphiques est l’utilisation de la couleur comme unique moyen de distinguer les séries de données ou les catégories.

Une courbe avec quatre lignes distinguées uniquement par la couleur — rouge, bleu, vert, orange — est illisible pour de nombreux utilisateurs atteints d’une déficience de la vision des couleurs, et totalement dénuée de sens pour quiconque utilise un mode de contraste élevé ou un affichage en niveaux de gris.

La solution est l’encodage redondant : utilisez la couleur plus au moins une autre propriété visuelle.

Courbes : utilisez différents styles de traits en plus des couleurs (plein, tirets, pointillés, tiret-point)
Graphiques en barres : utilisez des textures ou des motifs en plus des couleurs, ou ajoutez des étiquettes de données directement sur les barres
Nuages de points : utilisez différentes formes de marqueurs (cercle, carré, triangle, losange) en plus des couleurs
Diagrammes circulaires : ajoutez des étiquettes textuelles à l’intérieur ou à côté de chaque secteur — ne vous fiez jamais à la seule légende

Cela relève du critère 1.4.1 Utilisation de la couleur (niveau A) des WCAG 2.2 : la couleur ne doit pas être le seul moyen de véhiculer une information.

Le contraste dans les graphiques

Les éléments visuels non textuels comme les barres, les tracés de courbes et les points de données doivent atteindre un contraste de 3:1 par rapport à leur arrière-plan selon le critère 1.4.11 Contraste du contenu non textuel (niveau AA). Testez la palette de vos graphiques avec un vérificateur de contraste — de nombreuses palettes de marque qui semblent convenir sur de grandes surfaces échouent à cette exigence sur de petites tailles.

Le texte à l’intérieur des graphiques — étiquettes d’axes, étiquettes de données, légendes — doit respecter les mêmes exigences de contraste que le corps du texte : 4.5:1 pour le texte normal, 3:1 pour le texte de grande taille selon le critère 1.4.3 Contraste minimum.

Fournir des alternatives textuelles

Chaque graphique a besoin d’une alternative textuelle qui transmet les données qu’il affiche. La forme exacte qu’elle prend dépend de la complexité des données.

Graphiques simples : un texte alternatif descriptif

Pour un graphique en barres affichant cinq valeurs, un attribut alt bien rédigé peut résumer le constat clé :

<img
  src="monthly-revenue.png"
  alt="Monthly revenue Q1 2025: Jan £42k, Feb £38k, Mar £51k,
       Apr £49k, May £56k. Steady upward trend from February onwards."
>

Le texte alternatif fait ici deux choses : il énonce les points de données et résume l’enseignement principal. Ne vous contentez pas de décrire le graphique visuellement (« un graphique en barres montrant le chiffre d’affaires »). Décrivez ce que le graphique communique.

Graphiques complexes : des tableaux de données complémentaires

Lorsqu’un graphique contient plus de données que ne peut en contenir un attribut alt, fournissez un tableau de données accessible à proximité. Cela sert aussi les personnes qui préfèrent les données tabulaires aux formats visuels. Le tableau peut être masqué par défaut mais rester atteignable :

<figure>
  <figcaption>Revenue by region, Q1 2025</figcaption>
  <svg aria-labelledby="chart-title" aria-describedby="chart-desc" role="img">
    <title id="chart-title">Revenue by region, Q1 2025</title>
    <desc id="chart-desc">Bar chart showing UK leading with £180k,
    followed by DE at £124k, FR at £98k, and NL at £71k.</desc>
    <!-- chart content -->
  </svg>
  <details>
    <summary>View as table</summary>
    <table>
      <caption>Revenue by region, Q1 2025</caption>
      <thead><tr><th>Region</th><th>Revenue</th></tr></thead>
      <tbody>
        <tr><td>UK</td><td>£180,000</td></tr>
        <tr><td>DE</td><td>£124,000</td></tr>
        <tr><td>FR</td><td>£98,000</td></tr>
        <tr><td>NL</td><td>£71,000</td></tr>
      </tbody>
    </table>
  </details>
</figure>

Modèles spécifiques au SVG

Les graphiques SVG rendus en ligne (plutôt que sous forme de fichiers image) peuvent être rendus directement accessibles grâce à ARIA. Modèles clés :

Ajoutez role="img" à l’élément <svg>
Fournissez un <title> comme premier enfant du <svg> et liez-le avec aria-labelledby
Ajoutez un <desc> pour les descriptions plus longues et liez-le avec aria-describedby
Marquez les éléments décoratifs (lignes de grille, graduations) avec aria-hidden="true" pour réduire le bruit

Pour les graphiques interactifs où les utilisateurs peuvent sélectionner des points de données, chaque élément interactif a besoin d’un rôle, d’un nom et d’une prise en charge du clavier appropriés.

Si vos graphiques sont interactifs — infobulles au survol, segments cliquables, sélection et zoom — ils doivent être entièrement utilisables au clavier selon le critère 2.1.1 Clavier (niveau A).

Pour les graphiques comportant de nombreux points de données, implémentez un modèle de tabindex itinérant (roving) : un seul élément du graphique figure à la fois dans la séquence de tabulation, et les touches fléchées permettent de passer d’un point de données à l’autre au sein du graphique.

<!-- Each bar is a button, navigable with arrow keys -->
<g role="group" aria-label="Monthly revenue bars">
  <rect
    role="button"
    tabindex="0"
    aria-label="January: £42,000"
    onkeydown="handleChartKey(event)"
    ...
  />
</g>

Les infobulles qui n’apparaissent qu’au survol doivent aussi apparaître au focus clavier. Une infobulle visible uniquement par les utilisateurs de souris constitue un défaut d’accessibilité.

Choisir le bon type de graphique

Certains types de graphiques sont par nature plus accessibles que d’autres. Lorsque vous avez le choix :

Type de graphique	Accessibilité	Remarques
Graphique en barres	Élevée	Quantités faciles à encoder avec des étiquettes ; bonne prise en charge du clavier possible
Courbe	Élevée	Utilisez différents styles de traits ; annotez les points clés
Tableau	La plus élevée	Le plus facile à rendre accessible ; souvent le bon choix pour des données
Nuage de points	Moyenne	Nécessite une différenciation soignée des marqueurs ; navigation au clavier complexe
Carte de chaleur	Faible	Dépendante de la couleur par nature ; fournissez toujours un tableau en alternative
Circulaire/anneau	Faible	Valeurs difficiles à comparer ; à éviter au-delà de 3-4 segments

En cas de doute, un tableau bien mis en forme est presque toujours plus accessible qu’un graphique — et souvent plus facile à lire, handicap ou non. N’utilisez pas un graphique parce qu’il fait moderne ; utilisez-le lorsqu’il aide réellement les utilisateurs à comprendre une tendance ou une comparaison plus vite que des données tabulaires.

Tester vos graphiques

Les scanners d’accessibilité automatisés peuvent détecter les attributs alt manquants et certains modèles ARIA, mais ils ne peuvent pas vérifier que les données du graphique sont pertinentes, que la navigation au clavier fonctionne correctement, ni que le graphique a du sens pour un utilisateur de lecteur d’écran. Testez avec :

Un lecteur d’écran (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari) : naviguez jusqu’au graphique et vérifiez ce qui est annoncé
Le clavier uniquement : tabulez jusqu’au graphique et confirmez que tous les éléments interactifs sont atteignables et utilisables au clavier
La simulation de daltonisme : utilisez Chrome DevTools (Rendering > Emulate vision deficiency) pour voir comment le graphique apparaît selon différents types de déficience de la vision des couleurs
Le zoom à 200 % : vérifiez que les étiquettes et les légendes ne se chevauchent pas et ne sont pas tronquées

Notre service d’évaluation par lecteur d’écran teste les graphiques avec de véritables utilisateurs de technologies d’assistance — le moyen le plus rapide de découvrir ce que vos utilisateurs vivent réellement.