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, puedes tener tres elementos de botones, uno después del otro en el DOM. Cuando presionas Tab, se enfoca cada botón en orden. Prueba hacer clic en el siguiente bloque de código para mover el punto de inicio de la navegación del enfoque y, 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 otro en la pantalla. Por ejemplo, si usas una propiedad de CSS como float para mover un botón hacia la derecha, los botones aparecen en un orden diferente en la pantalla. Sin embargo, como su orden en el DOM sigue siendo el mismo, también se mantiene su orden de tabulación. Cuando el usuario presiona la tecla de tabulación en la página, los botones se enfocan en un orden no intuitivo. Intenta hacer clic en el siguiente bloque de código para mover el punto de inicio de la navegación del enfoque y, 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 la pantalla con CSS. Esto puede hacer que el orden de tabulación salte, aparentemente de forma aleatoria, y confunda a los usuarios que dependen del teclado. Por este motivo, la lista de tareas de la AIM web 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, intenta navegar con tabulación por tus páginas de vez en cuando para asegurarte de no haber arruinado el orden de tabulación por accidente. Es un buen hábito y que no requiere mucho esfuerzo.
Contenido fuera de pantalla
¿Qué sucede si tienes contenido que no se muestra actualmente, pero que de todos modos debe estar en el DOM, como un panel de navegación lateral responsivo? Cuando tienes elementos como este que reciben enfoque cuando están fuera de la pantalla, puede parecer como si el enfoque desapareciera y volviera a aparecer a medida que el usuario navega por la página, lo que claramente es un efecto no deseado. Lo ideal sería evitar que el panel se enfoque cuando está fuera de la pantalla y solo permitirlo 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 la pantalla se enfoca, puedes establecerlo en display: none o visibility: hidden y, luego, en display:
block o visibility: visible antes de mostrárselo al usuario.
En general, recomendamos a los desarrolladores que recorran sus sitios con tabulación antes de cada publicación para ver que el orden de tabulación no desaparezca o salga de una secuencia lógica. Si es así, asegúrate de ocultar de forma adecuada el contenido fuera de pantalla con display: none o visibility: hidden, o bien reorganiza las posiciones físicas de los elementos en el DOM para que estén en un orden lógico.