Muchos usuarios diferentes dependen del teclado para navegar por las aplicaciones, desde usuarios con problemas de motricidad temporales y permanentes hasta usuarios que usan combinaciones de teclas para ser más eficientes y productivos. Tener una buena estrategia de navegación con el teclado para tu aplicación crea una mejor experiencia para todos.
El enfoque y el orden de las pestañas
En un momento determinado, el enfoque hace referencia al elemento de tu aplicación que recibe activamente la entrada de un teclado, como un campo, una casilla de verificación, un botón o un vínculo. Además de los eventos de teclado, el elemento enfocado también recibe el contenido que se pega desde el portapapeles.
Para mover el enfoque en una página, usa TAB para navegar "hacia adelante" y SHIFT + TAB para navegar "hacia atrás". El elemento enfocado suele indicarse con un anillo de enfoque, y los distintos navegadores le aplican un estilo diferente. El orden en el que el enfoque avanza y retrocede a través de los elementos interactivos se denomina orden de tabulación.
Los elementos HTML interactivos, como los campos de texto, los botones y las listas de selección, son implícitamente enfocables: se insertan automáticamente en el orden de tabulación según su posición en el DOM. Estos elementos interactivos también tienen un controlador de eventos de teclado integrado. Los elementos como los párrafos y los divs no son enfocables de forma implícita porque, por lo general, los usuarios no necesitan interactuar con ellos.
Implementar un orden de tabulación lógico es una parte importante para brindar a los usuarios una experiencia de navegación fluida con el teclado. Hay dos ideas principales que debes tener en cuenta cuando evalúes y ajustes el orden de las pestañas:
- Organiza los elementos en el DOM para que estén en un orden lógico
- Configura correctamente la visibilidad del contenido fuera de la pantalla que no debería recibir el enfoque.
Organiza los elementos en el DOM para que estén en un orden lógico
Para verificar si el orden de tabulación de tu aplicación es lógico, intenta tabular tu página. En general, el enfoque debe seguir el orden de lectura, de izquierda a derecha y de arriba abajo en la página.
Si el orden de enfoque parece incorrecto, debes reorganizar los elementos en el DOM para que el orden de tabulación sea más natural. Para cambiar la disposición visual en tu sitio, muévelo antes en el DOM en lugar de darle un diseño con CSS para que aparezca antes.
Por ejemplo:
<button style="float: right">Kiwi</button> <button>Peach</button> <button>Coconut</button>
<button>Peach</button> <button>Coconut</button> <button>Kiwi</button>
Ten cuidado cuando cambies la posición visual de los elementos con CSS para evitar crear un orden de tabulación ilógico. Para corregir el orden ilógico de las pestañas, movimos el botón flotante "Kiwi" para que aparezca después de Coconut y quitamos el estilo intercalado.
Cómo configurar correctamente la visibilidad del contenido fuera de la pantalla
A veces, los elementos interactivos fuera de la pantalla deben estar en el DOM, pero no deben estar en el orden de tabulación. Por ejemplo, si tienes una navegación adaptable que se abre en una barra lateral cuando se hace clic en un botón, el usuario no debería poder enfocarse en la navegación mientras está cerrada.
Para evitar que un elemento interactivo en particular reciba el enfoque, debes asignarle al elemento cualquiera de las siguientes propiedades CSS:
display: nonevisibility: hidden
Para volver a agregar el elemento al orden de tabulación, por ejemplo, cuando la navegación está abierta, reemplaza estas propiedades de CSS por las siguientes:
display: blockvisibility: visible
Próximos pasos
Para los usuarios que operan su computadora casi por completo con el teclado o algún otro dispositivo de entrada, un orden de tabulación lógico es fundamental para que tu aplicación sea accesible y utilizable. Como buena práctica para verificar el orden de las pestañas, intenta navegar por tu aplicación con la tecla Tab antes de cada publicación.