Graphiques interactifs navigables au clavier

Les graphiques interactifs affichent souvent les valeurs uniquement au survol. Les personnes utilisant le clavier ou un écran tactile ne survolent jamais les éléments : ces données leur sont donc inaccessibles.

Permettez aux personnes d’atteindre chaque point de données ou chaque série avec la touche Tab en leur attribuant tabindex="0". Le clavier peut alors atteindre ce que la souris survole.

Un point atteignable par le focus qui n’annonce rien est inutile. Donnez à chacun un nom accessible indiquant son libellé et sa valeur, comme « mars, 240 ventes ».

Parcourir 100 points avec Tab est pénible. Utilisez les touches fléchées pour passer d’un point à l’autre et réservez Tab pour entrer dans le graphique ou en sortir.

Conservez un point avec tabindex 0 et les autres avec -1, puis déplacez la valeur 0 à mesure que les flèches sont utilisées. Ce tabindex itinérant maintient un nombre raisonnable d’arrêts avec Tab.

Tout ce qu’une infobulle affiche au survol doit également être affiché au focus. Associez à chaque gestionnaire mouseenter un gestionnaire de focus afin que les deux modes d’utilisation soient cohérents.

Mettez en évidence le point actuellement ciblé par le focus avec un contour ou un marqueur clair. Sans cela, les personnes au clavier ne savent pas où elles se trouvent.

Lorsque le focus passe à un nouveau point, une région aria-live peut en annoncer la valeur. Cela aide lorsque le libellé est rendu visuellement, mais pas dans le DOM.

Entourez l’ensemble d’un élément figure portant un nom afin que les personnes puissent le trouver, puis le passer en une seule fois lorsqu’elles ont fini de l’explorer.

L’interactivité est un plus, pas un remplacement. Conservez toujours le simple tableau de données, afin d’offrir une solution directe lorsque le déplacement avec les flèches est trop lent.

Éloignez la souris et utilisez le graphique uniquement avec Tab et les touches fléchées. Si vous ne pouvez pas atteindre chaque valeur, vos utilisateurs ne le pourront pas non plus. ⌨️

Comment une personne utilisant le clavier doit-elle passer d’un point de données à l’autre dans un graphique ?

Vous avez appris à rendre les points atteignables par le focus et nommés, à vous déplacer avec les flèches grâce au tabindex itinérant, à reproduire le survol au focus et à toujours conserver un tableau de secours. 🚀