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 usa la navegación sin mouse y se presiona la pestaña, se muestra el comportamiento estándar donde primero se enfoca la pestaña del navegador y 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 de formulario ).
Sin embargo, parece que una mejor accesibilidad tendría que presionar la pestaña en el último campo del formulario para saltar directamente al botón "Guardar" en la parte superior derecha de la página en lugar de tener que recorrer la pestaña del navegador y luego la URL del navegador nuevamente. Básicamente, quiero "omitir" el orden tradicional de enfoque en los elementos después de presionar la pestaña en un elemento específico (el último elemento enfocable en mi página, que es el último campo de formulario) para que vaya a otro elemento específico que quiero. ¿Hay alguna manera de configurar este comportamiento usando HTML/CSS/JS?
Hay dos formas de manejar esto.
El primero es con tabindex . Puedes controlar el orden de todos los elementos pero debes tener mucho cuidado. Puede hacer que el orden de tabulación sea más confuso. Cuanto mayor sea el tabindex, mayor prioridad tendrá el elemento en el orden de tabulación. Entonces podría poner tabindex='2' en todos los elementos de su formulario y tabindex='1' en sus botones y dejar el resto de los elementos en la página sin un tabindex. (Múltiples elementos pueden tener el mismo valor tabindex. El navegador los recorrerá en su orden DOM respectivo).
La segunda forma de manejar esto es con el propio orden DOM y luego usar CSS para mover los elementos donde los desee. Entonces, el DOM podría tener los elementos del formulario primero y luego los botones en segundo lugar. Luego puede usar CSS para colocar los botones en la esquina superior derecha. Este sería el método preferido porque no es tan "peligroso" como tabindex.