El foco no queda oculto
Silktide comprueba que, cuando se selecciona un control con el teclado, no quede completamente oculto detrás de otro contenido como un banner de cookies o un encabezado fijo. Un usuario de teclado que no puede ver el control seleccionado no tiene forma de saber dónde está en la página.
Las causas más comunes son los elementos que permanecen fijos mientras la página se desplaza:
- Banners en la parte superior o inferior de la página, como avisos de cookies
- Barras de navegación y pies de página "sticky" (fijos)
- Diálogos emergentes que permiten que el foco se mueva por detrás de ellos
Esta comprobación cubre el ocultamiento total, como exige en el Nivel AA (criterio 2.4.11). Su versión más estricta de , El foco no queda parcialmente oculto, también señala controles que solo están cubiertos en parte.
Por qué es importante
Las personas que navegan con el teclado siguen el para saber en qué control se encuentran. Cuando el foco pasa a un control enterrado bajo un banner de cookies o un pie fijo, el indicador desaparece: la persona usuaria no puede saber qué hará al pulsar Intro, ni siquiera dónde está, y puede abandonar la página por completo.
Cómo solucionarlo
- Da preferencia a contenido que se desplace con la página frente a elementos fijados por encima de ella.
- Cuando un banner o encabezado fijo deba permanecer, utiliza las propiedades CSS
scroll-paddingoscroll-marginpara que los elementos enfocados se desplacen quedando libres de él: consulta la técnica C43 de WCAG. - En diálogos y ventanas emergentes, atrapa el foco dentro de ellos mientras estén abiertos para que
nada detrás pueda recibir el foco. La mayoría de las bibliotecas de diálogos y el elemento nativo
<dialog>lo hacen por ti.
Cómo lo prueba Silktide
- Simula que una persona usuaria de teclado recorre con Tab todos los elementos enfocables, tanto en la vista de escritorio como en la móvil.
- Simula que el navegador desplaza verticalmente cada elemento enfocado hasta el centro de la pantalla (consulta la nota sobre desplazamiento más abajo).
- Comprueba si algún otro elemento se sitúa por encima del elemento enfocado. Se ignoran los elementos superpuestos con fondos transparentes o semitransparentes, ya que el indicador de foco sigue siendo visible a través de ellos.
- Señala el control si está completamente cubierto por un elemento sólido. La superposición parcial no se señala con esta comprobación: para eso está El foco no queda parcialmente oculto.
Por qué simulamos el desplazamiento
La cantidad que desplaza un navegador entre pulsaciones de Tab varía con el tamaño de la ventana, por lo que si un encabezado fijo cubre un elemento enfocado puede diferir entre pantallas que solo se llevan unos pocos píxeles de altura. Probar a un único tamaño exacto de ventana señalaría problemas que nadie con una ventana ligeramente distinta podría reproducir.
En su lugar, Silktide evalúa cada elemento como si se hubiera desplazado hasta el centro de la pantalla. Este enfoque deliberadamente generoso señala problemas que afectan de forma coherente a todos los tamaños de pantalla y evita los que solo afectan a una altura de ventana exacta. El W3C no especifica cómo debe probarse este criterio.
Diálogos que se abren después de cargar la página
Si una página contiene un diálogo que está cerrado por defecto, Silktide supone que, mientras esté abierto, el foco no puede salir de él —que es como se comporta un diálogo correctamente construido—. Un diálogo defectuoso que permite que el foco se escape por detrás puede no señalarse a menos que esté abierto cuando se carga la página.
Solución de problemas
Puedo ver sin problemas el elemento enfocado
Prueba con una ventana más pequeña: los elementos ocultados por encabezados o pies fijos a menudo solo chocan a ciertas alturas de ventana. Si llegas a la conclusión de que el elemento nunca queda oculto de manera significativa, puedes ignorar el hallazgo.