Gráficos interactivos navegables con teclado

Los gráficos interactivos suelen mostrar los valores únicamente al hacer hover. Los usuarios del teclado y de dispositivos táctiles nunca hacen hover, por lo que esos datos quedan fuera de su alcance.

Permita que los usuarios lleguen con Tab a cada punto o serie asignándoles tabindex="0". Así, el teclado puede acceder a lo que el ratón muestra mediante hover.

Un punto que puede recibir el foco pero no anuncia nada no sirve. Asigne a cada uno un nombre accesible que indique su etiqueta y valor, como marzo, 240 ventas.

Recorrer 100 puntos con Tab resulta incómodo. Use las teclas de flecha para avanzar de un punto a otro y reserve Tab para entrar y salir del gráfico.

Mantenga un punto con tabindex 0 y el resto con -1, desplazando el 0 cuando se pulsen las flechas. Este roving tabindex mantiene bajo control el número de paradas de Tab.

Todo lo que muestre un tooltip al hacer hover debe mostrarse también al recibir el foco. Asocie cada controlador mouseenter con un controlador de foco para que ambas formas de interacción coincidan.

Resalte el punto que tiene el foco mediante un outline o marcador claro. Sin él, los usuarios del teclado no sabrán dónde se encuentran.

Cuando el foco pase a un punto nuevo, una región aria-live puede leer su valor. Esto ayuda cuando la etiqueta se muestra visualmente, pero no está en el DOM.

Envuelva todo en un figure con un nombre para que los usuarios puedan encontrarlo y omitirlo como una sola unidad cuando terminen de explorarlo.

La interactividad es una ayuda, no un sustituto. Mantenga siempre la tabla de datos sencilla para ofrecer una ruta directa cuando avanzar con las flechas resulte demasiado lento.

Aparte el ratón y controle el gráfico únicamente con Tab y las teclas de flecha. Si no puede acceder a todos los valores, sus usuarios tampoco podrán. ⌨️

Ha aprendido a hacer que los puntos puedan recibir el foco y tengan un nombre, a desplazarse con las flechas mediante roving tabindex, a reproducir el comportamiento de hover al recibir el foco y a mantener siempre una tabla alternativa. 🚀