La importancia del orden predeterminado del DOM
Trabajar con elementos nativos es una forma excelente 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, podrías tener tres elementos de botones, uno al lado del otro en el DOM. Al presionar Tab, se coloca el foco en cada botón por orden. Intenta hacer clic en el siguiente bloque de código para mover el punto de partida de la navegación del foco y, luego, presiona Tab para mover el foco entre los botones.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Sin embargo, es importante tener en cuenta que, al usar CSS, es posible que los elementos tengan un orden en el DOM pero que 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 aparecen en un orden diferente en la pantalla. Sin embargo, ya que el orden en el DOM se mantiene igual, también se mantiene 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 siguiente bloque de código para mover el punto de partida de la navegación del foco y, luego, presiona Tab para mover el foco entre los botones.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Ten cuidado al cambiar la posición visual de los elementos en la pantalla con CSS. Esto puede provocar que el orden de tabulación salte, de forma aparentemente aleatoria, y confunda a los usuarios que utilizan el teclado. Por esta razón, la lista de tareas de la Web AIM indica en la sección 1.3.2 que el orden de navegación y lectura, como lo determina el orden del código, debe ser lógico e intuitivo.
Como regla, intenta navegar con tabulación por tu página de vez en cuando para asegurarte de que no hayas arruinado accidentalmente el orden de tabulación. Es un buen hábito y no requiere demasiado esfuerzo.
Contenido fuera de pantalla
¿Qué sucede si tienes contenido que actualmente no se muestra, pero que de todas formas necesita estar en el DOM, como una barra lateral de navegación responsiva? Cuando tienes elementos como este, que reciben el foco cuando están fuera de pantalla, puede parecer que el foco desaparece y reaparece cuando el usuario navega con tabulación por la página, lo que es un efecto no deseado. Lo ideal es evitar que el panel obtenga el foco cuando se encuentre fuera de pantalla, y solo permitirle que lo tenga cuando el usuario pueda interactuar con él.
A veces necesitas investigar un poco para encontrar a dónde se fue el foco. Puedes usar document.activeElement desde la consola para encontrar qué elemento tiene actualmente el foco.
Cuando sepas qué elemento fuera de pantalla tiene el foco, puedes configurarlo en display: none o visibility: hidden y, luego, volver a configurarlo en display:
block o visibility: visible antes de mostrarlo al usuario.
En general, recomendamos a los programadores navegar con tabulación por sus sitios antes de cada publicación para que vean si el orden de tabulación no desaparece o se sale de una secuencia lógica. Si esto sucede, deberías asegurarte de esconder adecuadamente el contenido fuera de pantalla con display: none o visibility: hidden, o de reorganizar las posiciones físicas de los elementos en el DOM para que sigan un orden lógico.