¿por qué el cursor o el foco salta alrededor en mi sitio web?

El foco salta debido al orden del código fuente

Un foco que salta en todas direcciones suele ocurrir porque el orden en que los elementos aparecen en el código fuente no coincide con el orden en que se muestran en pantalla. Cuando alguien navega por una página usando la tecla Tabulador, espera que el foco avance ordenadamente de arriba hacia abajo y de izquierda a derecha, siguiendo la dirección de lectura. Si un menú, una ventana emergente o una barra lateral se posiciona en otro lugar de la pantalla mediante CSS que donde se encuentra en el código, el foco salta visiblemente de un lado a otro: primero hacia abajo, luego hacia arriba, después a un botón que ya se había pasado visualmente.

Una causa frecuente es un valor de `tabindex` establecido manualmente en un número mayor que cero, lo que provoca que los elementos se extraigan del orden natural. También los banners de cookies, los filtros que se cargan dinámicamente y las ventanas modales que no retienen correctamente el foco generan este efecto — el foco puede desaparecer incluso de la vista, detrás del banner o bajo una superposición que aún está abierta. Para verificar esto, lo mejor es recorrer todo el proceso de compra solo con el teclado. cómo probar si una tienda en línea se puede usar con el teclado describe cómo funciona esa prueba en la práctica. A menudo, el orden del foco está relacionado con los mismos elementos que también causan problemas con banners de cookies y ventanas emergentesporque se superponen primero en la página.

Dónde aparece esto en WCAG 2.1: criterio 2.4.3

Este requisito se encuentra en WCAG 2.1 bajo el criterio de éxito 2.4.3, "Focus Order", que exige que el orden en que los elementos reciben el foco preserve el significado y la usabilidad de la página. Es un criterio de nivel A y, por lo tanto, también forma parte del nivel AA, que es lo que EN 301 549 implica en la práctica. La investigación de la ACM sobre la accesibilidad de tiendas en línea muestra que este tipo de problemas de navegación ocurren regularmente en la práctica y los usuarios los experimentan como una molestia. Una prueba automatizada de accesibilidad puede detectar si hay un `tabindex` con un valor positivo, pero si el orden del foco se siente realmente lógico para alguien que no ve la página es algo que una prueba automatizada de accesibilidad no puede determinar completamente — eso depende de una revisión manual.