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, 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, 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 comprobación 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 necesita demasiado esfuerzo.
Contenido fuera de pantalla
¿Qué pasa 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 receptiva? Cuando tienes elementos como este, que obtienen 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. Está claro 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 descubras qué elemento fuera de pantalla tiene el foco, puedes configurarlo en
display: none o visibility: hidden, y luego volver a configurarlo en display:
block or 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
reordenar las posiciones físicas de los elementos en el DOM para que sigan un orden
lógico.