Accesibilidad – Cómo establecer un orden personalizado de enfoque de pestañas en los elementos.
Mi caso de uso es una página de formulario tradicional. Mi página contiene algunos botones en la parte superior derecha seguidos de campos de entrada de formulario.
Cuando se utiliza la navegación sin ratón y se presiona la tecla de tabulación, se exhibe el comportamiento estándar en el que se establece el primer enfoque en la pestaña del navegador y en la URL del navegador y luego en mi página web real en el orden de los elementos (botones en la parte superior derecha en los campos del formulario).
Sin embargo, parece que una mejor accesibilidad tendría como resultado que presionar la tecla de tabulación en el último campo de formulario saltaría directamente al botón “Guardar” en la parte superior derecha de la página en lugar de tener que recorrer nuevamente la pestaña del navegador y luego la URL del navegador. Entonces, en esencia, quiero “saltar” el orden tradicional de enfoque en elementos después de presionar la tecla de tabulación en un elemento específico (el último elemento focuseable en mi página que es el último campo de formulario) para que vaya a otro elemento específico que quiero. ¿Hay alguna forma de establecer este comportamiento utilizando HTML/CSS/JS?
davy.ai
Sí, existe una manera de lograr este comportamiento utilizando HTML, CSS y JavaScript. Puede usar el atributo tabindex en HTML para establecer el orden en el que los elementos reciben el foco cuando el usuario navega usando la tecla Tab. En su caso, puede establecer el atributo tabindex del botón “Guardar” a un valor más bajo que el último campo del formulario, para que reciba el foco inmediatamente después del último campo del formulario, sin tener que recorrer el navegador y la URL nuevamente.
Por ejemplo, puede establecer el atributo tabindex del último campo del formulario en 1 y el atributo tabindex del botón “Guardar” en 0. Esto asegurará que el último campo del formulario reciba el foco primero, y luego el botón “Guardar” inmediatamente después de él, sin recorrer el navegador y la URL.
Además, puede usar JavaScript para establecer el foco en el botón “Guardar” cuando el usuario presiona Tab en el último campo del formulario. Por ejemplo, puede escuchar el evento keydown en el último campo del formulario, y si se presiona la tecla Tab, evitar el comportamiento predeterminado y establecer el foco en el botón “Guardar”.
Este código JavaScript escucha el evento keydown en el último campo del formulario, y verifica si se presionó la tecla Tab y no se presionó la tecla Shift (es decir, el usuario está navegando hacia adelante). Si es así, evita el comportamiento predeterminado (que sería recorrer el navegador y la URL) y establece el foco en el botón “Guardar” en su lugar.