Muchos usuarios diferentes dependen del teclado para navegar por las aplicaciones, desde usuarios con deficiencias motrices temporales y permanentes hasta usuarios que utilizan 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 (como un campo, una casilla de verificación, un botón o un vínculo) que recibe entradas del teclado actualmente. Además de recibir eventos del teclado, el elemento enfocado también obtiene contenido que se pega desde el portapapeles.
Si deseas mover el enfoque en una página, usa TAB para navegar hacia "adelante" y SHIFT + TAB para navegar hacia atrás. El elemento enfocado actualmente se indica con un anillo de enfoque, y varios navegadores diseñan sus anillos de enfoque de manera 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 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 control de eventos de teclado incorporado. Algunos elementos, como párrafos y divs, no se pueden enfocar de manera implícita, ya que los usuarios no suelen necesitar 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 pestañas:
- Organiza los elementos en el 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 en el 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 navegar con tabulación 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 del enfoque parece incorrecto, debes reorganizar los elementos en el DOM para que el orden de las pestañas 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 lógico de tabulaciones
Orden de tabulación ilógico
A continuación, se compara el código de estos dos ejemplos:
Orden lógico de tabulaciones
<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 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 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.
Se configuró correctamente la visibilidad del contenido fuera de 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 de navegación lateral responsivo que se abre cuando haces clic en un botón, el usuario no debería poder enfocarse en él cuando está cerrado.
Para evitar que un elemento interactivo en particular reciba el foco, debes proporcionarle alguna de las siguientes propiedades de CSS:
display: nonevisibility: hidden
Para volver a agregar el elemento en el orden de tabulación, por ejemplo, cuando se abre el panel de navegación 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 con 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 un buen hábito para verificar el orden de las pestañas, intenta revisar tu aplicación antes de cada publicación.