La importancia del orden predeterminado del DOM
Trabajar con elementos nativos es una excelente manera de aprender sobre el comportamiento del foco, ya que se insertan automáticamente en el orden de tabulación según su posición en el DOM.
Por ejemplo, es posible que tengas tres elementos de botones, uno después del otro en el DOM. Cuando presionas Tab, se enfoca cada botón en orden. Intenta hacer clic en el bloque de código que aparece a continuación para mover el punto de partida de la navegación del enfoque. Luego, presiona Tab para mover el enfoque entre 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 que los elementos existan en un orden en el DOM, pero que aparezcan en un orden diferente en la pantalla. Por ejemplo, si usas una propiedad de CSS como float para mover un botón hacia la derecha, los botones aparecerán en un orden diferente en la pantalla. Sin embargo, debido a que su orden en el DOM sigue siendo el mismo, también lo hace su orden de tabulación. Cuando el usuario presiona la tecla de tabulación en la página, los botones obtienen el foco en un orden no intuitivo. Intenta hacer clic en el bloque de código que aparece a continuación para mover el punto de partida de la navegación del 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, de forma aparentemente aleatoria, y confunda a los usuarios que dependen del teclado. Por este motivo, la lista de tareas de la Web AIM indica en la sección 1.3.2 que el orden de lectura y navegación, según lo determinado por el orden del código, debe ser intuitivo y lógico.
Como regla general, intenta navegar con tabulación por las páginas de vez en cuando para asegurarte de no haber arruinado accidentalmente el orden de tabulación. Es un buen hábito y no requiere mucho esfuerzo.
Contenido fuera de pantalla
¿Qué sucede si tienes contenido que no se muestra actualmente, pero que aún necesita estar en el DOM, como una navegación lateral responsiva? Cuando tienes elementos como este que reciben el foco cuando están fuera de la pantalla, puede parecer que el foco desaparece y vuelve a aparecer cuando el usuario navega por la página, lo que es claramente un efecto no deseado. Lo ideal sería evitar que el panel obtenga el foco cuando esté fuera de la pantalla y solo permitir que lo haga cuando el usuario pueda interactuar con él.
A veces, necesitas investigar un poco para descubrir adónde se fue el enfoque. Puedes usar document.activeElement desde la consola para averiguar qué elemento está enfocado actualmente.
Una vez que sepas qué elemento fuera de pantalla se enfoca, 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 con tabulación por sus sitios antes de cada publicación para que comprueben si el orden de tabulación no desaparece o se sale de una secuencia lógica. Si es así, debes asegurarte de ocultar adecuadamente el contenido fuera de pantalla con display: none o visibility: hidden, o bien reorganizar las posiciones físicas de los elementos en el DOM para que estén en un orden lógico.