Navegación por Tabulación
La navegación por teclado es una de las principales formas de interactuar con una web para las personas que no pueden usar un ratón. La optimización de la navegación por tabulación asegura que el sitio sea navegable y comprensible para todos, cumpliendo con criterios como el Criterio 2.1.1 (Operable - Teclado) y el Criterio 2.4.7 (Operable - Foco Visible) de la WCAG 2.2. Hay otros más que tocan el tema de la navegación y el orden del foco que iremos viendo mientras hablamos del tema.
Consejos para Mejorar la Navegación por Tabulación
Orden Lógico del Foco
Asegúrate de que el foco siga un flujo natural al moverse por la página. Los usuarios deben poder navegar sin esfuerzo, y los elementos interactivos deben seguir un orden lógico. Esto se ajusta al Criterio 2.4.3 (Operable - Orden del Foco). Prueba a moverte por la página usando Tab y verás que intentamos seguir un flujo natural.
Uso Adecuado del tabindex
Controlar el orden del foco con tabindex puede ayudar a definir cómo se navega por la página. Utiliza tabindex='0' para permitir la navegación natural y tabindex='-1' para excluir elementos no interactivos. Ciertos elementos, como button y a, son navegables por defecto, por lo que no necesitan un tabindex explícito.
Sin embargo, en muchas ocasiones vas a tener que jugar con el tabindex si por ejemplo tienes un menú que se despliega y quieres que el foco se mueva a los elementos del menú solo cuando se abra. Por ejemplo, en el apartado de Preguntas Frecuentes a continuación solo puedes acceder a los links (elementos interactivos) con el teclado si el accordion está abierto. Prueba a usar Tab para llegar a ellos y pulsa Enter o Space cuando el foco esté sobre ellos.
El uso de tabindex debe ser moderado, ya que un uso incorrecto podría llevar a una navegación confusa, violando el Criterio 2.4.3.
Indicadores de Foco Claros
Es fundamental que los usuarios puedan ver claramente cuál es el elemento enfocado. Utilizar un grosor de al menos 2 píxeles para los indicadores de foco es una buena práctica que está alineada con el Criterio 2.4.7 (Operable - Foco Visible).
button:focus, a:focus {
outline: 3px solid #005fcc; /* Resaltado claro para los elementos enfocados */
}El uso de un foco bien definido asegura que los usuarios no se pierdan al navegar, especialmente aquellos con discapacidades visuales.