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, 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, 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 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 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 mucho 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 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 encontrar a dónde se fue el foco. Puedes usar document.activeElement
desde la consola para encontrar qué elemento tiene actualmente el foco.
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 mostrarlo 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 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.