La importancia del orden predeterminado del DOM
Trabajar con elementos nativos es una excelente manera de aprender sobre el comportamiento del enfoque, ya que se insertan automáticamente en el orden de tabulación según su posición en el DOM.
Por ejemplo, puedes tener tres elementos de botón, uno después del otro en el DOM. Si presionas Tab, se enfocará cada botón en orden. Haz clic en el bloque de código que aparece 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, con CSS, es posible que los elementos existan en un orden en el DOM, pero aparezcan en un orden diferente en la pantalla. Por ejemplo, si usas una propiedad CSS como float para mover un botón a la derecha, los botones aparecerán en un orden diferente en la pantalla. Sin embargo, como su orden en el DOM sigue siendo el mismo, también lo es el orden de tabulación. Cuando el usuario presiona la tecla Tab para desplazarse por la página, los botones se enfocan en un orden no intuitivo. Haz clic en el bloque de código que aparece 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 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 la pantalla con CSS. Esto puede hacer que el orden de tabulación salte, aparentemente de forma aleatoria, lo que puede confundir a los usuarios que dependen del teclado. Por este motivo, la lista de tareas de AIM web indica en la sección 1.3.2 que el orden de lectura y navegación, según lo determine el orden de código, debe ser lógico e intuitivo.
Como regla general, intenta desplazarte por las páginas con la tecla Tab de vez en cuando para asegurarte de no haber desordenado accidentalmente el orden de tabulación. Es un buen hábito que no requiere mucho esfuerzo.
Contenido fuera de pantalla
¿Qué sucede si tienes contenido que no se muestra actualmente, pero que aún debe estar en el DOM, como un panel lateral responsivo? Cuando tienes elementos como este que reciben el enfoque cuando están fuera de la pantalla, puede parecer que el enfoque desaparece y vuelve a aparecer a medida que el usuario avanza por la página, lo que es un efecto no deseado. Idealmente, deberíamos evitar que el panel se enfoque cuando está fuera de la pantalla y solo permitir que se enfoque cuando el usuario pueda interactuar con él.
A veces, debes hacer un poco de trabajo de detective para averiguar dónde se fue el enfoque. Puedes usar document.activeElement desde la consola para descubrir qué elemento está enfocado en este momento.
Una vez que sepas qué elemento fuera de la pantalla está enfocado, puedes establecerlo en display: none o visibility: hidden y, luego, volver a establecerlo en display:
block o visibility: visible antes de mostrárselo al usuario.
En general, recomendamos a los desarrolladores que naveguen por sus sitios con la tecla Tab antes de cada publicación para verificar que el orden de tabulación no desaparezca ni salte de una secuencia lógica. Si es así, debes asegurarte de ocultar correctamente el contenido fuera de la pantalla con display: none o visibility: hidden, o bien de reorganizar las posiciones físicas de los elementos en el DOM para que estén en un orden lógico.