Grafici interattivi navigabili con la tastiera

I grafici interattivi mostrano spesso i valori solo al passaggio del mouse. Gli utenti da tastiera e touch non eseguono questo gesto, quindi quei dati restano loro inaccessibili.

Permettete agli utenti di raggiungere ogni punto dati o serie con Tab assegnando loro tabindex="0". In questo modo la tastiera può raggiungere ciò che il mouse porta in evidenza.

Un punto focalizzabile che non annuncia nulla è inutile. Assegnate a ciascuno un nome accessibile che riporti etichetta e valore, ad esempio marzo, 240 vendite.

Passare con Tab attraverso 100 punti è faticoso. Usate i tasti freccia per passare da un punto all’altro e riservate Tab per entrare nel grafico e uscirne.

Mantenete un punto con tabindex 0 e tutti gli altri con -1, spostando lo 0 quando vengono premuti i tasti freccia. Questo roving tabindex mantiene ragionevole il numero di tap con Tab.

Qualunque informazione mostri un tooltip al passaggio del mouse, mostratela anche al focus. Affiancate a ogni gestore mouseenter un gestore del focus, così i due input si comportano allo stesso modo.

Evidenziate il punto attualmente focalizzato con un’outline o un indicatore ben visibile. Senza di esso, gli utenti da tastiera non capiscono dove si trovano.

Quando il focus passa a un nuovo punto, una regione aria-live può pronunciarne il valore. È utile quando l’etichetta viene visualizzata graficamente ma non compare nel DOM.

Racchiudete tutto in un elemento figure dotato di un nome, così gli utenti possono trovarlo e saltarlo come un’unica unità quando hanno terminato l’esplorazione.

L’interattività è un vantaggio, non un sostituto. Mantenete sempre la semplice tabella di dati, così gli utenti hanno un percorso immediato quando spostarsi con le frecce è troppo lento.

Mettete da parte il mouse e controllate il grafico usando solo Tab e i tasti freccia. Se non riuscite a raggiungere ogni valore, non potranno farlo nemmeno i vostri utenti. ⌨️

Come dovrebbe spostarsi un utente da tastiera tra molti punti dati di un grafico?

Avete imparato a rendere i punti focalizzabili e dotati di un nome, a spostarvi con le frecce tramite roving tabindex, a replicare al focus ciò che avviene al passaggio del mouse e a mantenere sempre una tabella alternativa. 🚀