La importancia del orden predeterminado del DOM
Trabajar con elementos nativos es una excelente manera de aprender sobre el comportamiento del enfoque porque se insertan automáticamente en el orden de tabulación según su en el DOM.
Por ejemplo, puedes tener tres elementos de botones, uno después del otro en la
DOM Cuando presionas Tab, se enfoca cada botón en orden. Intenta hacer clic en el bloque de código
a continuación para mover el punto de partida de la navegación de enfoque y luego presiona Tab para mover el enfoque
a través de los botones.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Sin embargo, es importante tener en cuenta que, si usas CSS, es posible tener elementos
existen en un orden en el DOM, pero aparecen en un orden diferente en la pantalla. Para
Por ejemplo, si usas una propiedad de CSS, como float, para mover un botón hacia la derecha.
los botones aparecen en un orden diferente en la pantalla. Sin embargo, debido a que su orden en
el DOM sigue siendo el mismo, al igual que su orden de tabulación. Cuando el usuario navega por las pestañas
la página, los botones obtienen el foco en un orden no intuitivo. Intenta hacer clic en el
bloque de código debajo para mover el punto de partida de la navegación de enfoque, luego presiona Tab para
mover el enfoque entre los botones.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Ten cuidado cuando cambies la posición visual de los elementos en pantalla con CSS. Esto puede hacer que el orden de tabulación salte, aparentemente de forma aleatoria, lo que es confuso usuarios que dependen del teclado. Por este motivo, la lista de comprobación de la Web AIM indica en la sección 1.3.2 que el orden de lectura y navegación, según lo determine el orden del código, de forma lógica e intuitiva.
Como regla general, intenta navegar con tabulación por las páginas de vez en cuando para asegurarte de que no haya arruinado accidentalmente el orden de tabulación. Es un buen hábito y que no requiera mucho esfuerzo.
Contenido fuera de pantalla
¿Qué sucede si tienes contenido que actualmente no se muestra, pero que de todos modos necesita ser en el DOM, como una navegación lateral adaptable? Cuando tienes elementos como estos que el enfoque cuando están fuera de la pantalla, puede parecer que el foco está desaparecen y vuelven a aparecer cuando el usuario navega por la página, claramente un efecto no deseado. Idealmente, deberíamos evitar que el panel se enfoque cuando está fuera de la pantalla y solo permite que se enfoque cuando el usuario puede interactuar con él.
A veces, hay que investigar un poco para descubrir
dónde se ha enfocado el enfoque
desaparecido. Puedes usar document.activeElement desde la consola para averiguar cuál
está enfocado actualmente.
Una vez que sabes qué elemento fuera de pantalla se enfoca, puedes configurarlo para que
display: none o visibility: hidden y, luego, vuelve a establecerla en display:
block o visibility: visible antes de mostrarla al usuario.
En general, animamos a los desarrolladores a que consulten sus sitios antes de cada uno
publique para ver que el orden de tabulación no desaparece o sale de una lógica
secuencia. Si es así, asegúrate de ocultarla correctamente
contenido fuera de pantalla con display: none o visibility: hidden, o que
reorganizar los elementos posiciones físicas en el DOM para que estén en una relación
en el orden personalizado.