Muchos usuarios diferentes dependen del teclado para navegar por las aplicaciones (desde usuarios con discapacidades motrices temporales y permanentes para los usuarios que usan el teclado accesos directos para ser más eficiente y productivo. Tener una buena navegación con el teclado de seguridad para tu aplicación crea una mejor experiencia para todos.
El enfoque y el orden de las pestañas
En un momento determinado, enfoque hace referencia a qué elemento de tu aplicación (como un campo, casilla de verificación, botón o vínculo) actualmente recibe entradas 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". El elemento enfocado actualmente suele indicarse con un
anillo de enfoque y varios navegadores diseñan sus anillos de manera diferente. El
orden en el que el enfoque avanza y retrocede a través de los elementos interactivos
se llama orden de tabulación.
Los elementos HTML interactivos, como los campos de texto, los botones y las listas de selección, se Se pueden enfocar de manera 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. Elements como párrafos y divs, no se pueden enfocar de manera implícita porque los usuarios suelen necesitan interactuar con ellos.
Implementar un orden de tabulación lógico es una parte importante de brindar a tus usuarios con una experiencia de navegación fluida. Hay dos ideas principales para mantener cuando evalúes y ajustes el orden de las pestañas:
- Organiza los elementos en el DOM para que estén en orden lógico
- Establece correctamente la visibilidad del contenido fuera de pantalla que no debería recibirse. enfoque
Organiza los elementos en el DOM para que estén en orden lógico
Para comprobar si el orden de tabulación de tu aplicación es lógico, intenta navegar con tabulación en . En general, el enfoque debe seguir el orden de la lectura, moviéndose de izquierda a derecha, de la parte superior a la parte inferior de la página.
Si el orden del enfoque parece incorrecto, debes reorganizar los elementos en el DOM para hacer que el orden de tabulación sea más natural. Si quieres que algo aparezca visualmente antes en la pantalla, muévela antes en el DOM.
Prueba navegar con tabulación por los dos conjuntos de botones que aparecen a continuación para experimentar una pestaña lógica orden versus 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 creando un orden de tabulación ilógico. Para corregir el orden de tabulación no lógico anterior, mueve el "Kiwi" flotante para que aparezca después de la palabra "Coconut" en el DOM y quitar 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 deberían en el orden de tabulación. Por ejemplo, si tienes un panel de navegación lateral responsivo que abre cuando haces clic en un botón, el usuario no debería poder enfocarse en el panel de navegación lateral cuando está cerrado.
Para evitar que un elemento interactivo en particular se enfoque, debes proporcionar al elemento cualquiera 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 navega al lateral abierto, reemplaza las propiedades de CSS anteriores con las siguientes:
display: blockvisibility: visible
Próximos pasos
Para los usuarios que operan su computadora casi por completo con el teclado o otro dispositivo de entrada, un orden de tabulación lógico es esencial para que tu que la aplicación sea accesible y utilizable. Como un buen hábito para revisar el orden de las pestañas, intenta Revisar la aplicación mediante tabulación antes de cada publicación.