Muchos usuarios diferentes dependen del teclado para navegar por las aplicaciones, desde usuarios con discapacidades motoras 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.
Enfoque y orden de tabulación
En un momento determinado, el foco se refiere a qué elemento de tu aplicación (como un campo, una casilla de verificación, un botón o un vínculo) recibe actualmente la entrada del teclado. Además de recibir eventos del teclado, el elemento enfocado también obtiene 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”. En general, el elemento que tiene actualmente el foco se indica con un anillo de foco, y varios navegadores aplican estilos diferentes a sus anillos de foco. El orden en el que el foco avanza o retrocede entre los elementos interactivos se denomina orden de tabulación.
Los elementos HTML interactivos, como campos de texto, botones y listas seleccionadas, son enfocables de forma implícita: 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 manejo de eventos de teclado incorporado. Los elementos como los párrafos y los divs no pueden enfocarse 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 proporcionar 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 tabulación:
- Organiza los elementos del DOM para que estén en orden lógico
- Se configuró correctamente la visibilidad del contenido fuera de pantalla que no debería recibir el enfoque.
Organiza los elementos del DOM para que estén en orden lógico
Para verificar si el orden de tabulación de tu aplicación es lógico, intenta desplazarte por la página. En general, el enfoque debe seguir el orden de lectura, de izquierda a derecha, desde la parte superior hasta la parte inferior de 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. Si quieres que algo aparezca visualmente antes en la pantalla, muévelo antes en el DOM.
Prueba presionar Tab en los dos conjuntos de botones que aparecen a continuación para experimentar un orden de tabulación lógico en comparación con un orden de tabulación ilógico:
Orden de tabulación lógico
Orden de tabulación ilógico
A continuación, se compara el código de estos dos ejemplos:
Orden de tabulación lógico
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Orden de tabulación ilógico
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Ten cuidado al cambiar la posición visual de los elementos con CSS para evitar crear un orden de tabulación ilógico. Para corregir el orden de tabulación ilógico anterior, mueve el botón flotante “Kiwi” para que aparezca después del botón “Coconut” en el DOM y quita el estilo intercalado.
Establece correctamente la visibilidad del contenido fuera de la pantalla
A veces, los elementos interactivos fuera de pantalla deben estar en el DOM, pero no en el orden de tabulación. Por ejemplo, si tienes un panel lateral responsivo que se abre cuando haces clic en un botón, el usuario no debería poder enfocarse en el panel lateral cuando está cerrado.
Para evitar que un elemento interactivo en particular reciba el enfoque, debes asignarle una de las siguientes propiedades CSS:
display: nonevisibility: hidden
Para volver a agregar el elemento al orden de tabulación, por ejemplo, cuando se abre el panel lateral, reemplaza las propiedades de CSS anteriores por lo siguiente:
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 esencial para que tu aplicación sea accesible y fácil de usar. Como buen hábito para verificar el orden de tabulación, prueba navegar con tabulación por tu aplicación antes de cada publicación.