Saltar al contenido
SilktideAyuda

Foco no parcialmente oculto

Silktide comprueba que, cuando se selecciona un control con el teclado, ninguna parte de este quede oculta detrás de otro contenido, como un aviso de cookies o un encabezado fijo. Incluso un control parcialmente cubierto puede dejar a una persona que usa el teclado sin saber dónde se encuentra en la página.

Las causas más habituales 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 fijos
  • Diálogos emergentes que permiten que el foco se mueva detrás de ellos

Esta es la versión más estricta de de Nivel AAA (criterio 2.4.12) de Foco no oculto: la comprobación de solo marca los controles que están completamente cubiertos, mientras que esta marca cualquier cobertura, por mínima que sea.

Por qué es importante

Quienes navegan con el teclado siguen el indicador de para saber en qué control están. Cuando parte de un control con foco desaparece bajo un aviso de cookies o un pie de página fijo, la persona usuaria puede no ver el indicador, leer mal la etiqueta del control o perder la orientación; además, un control que en una pantalla está solo parcialmente cubierto puede quedar totalmente cubierto en otra más pequeña.

Cómo solucionarlo

  1. Prioriza el contenido que se desplaza con la página frente a los elementos fijados por encima de ella.
  2. Cuando un banner o encabezado fijo deba permanecer, usa las propiedades CSS scroll-padding o scroll-margin para que los elementos con foco se desplacen quedando despejados de él; consulta la técnica WCAG C43.
  3. En diálogos y ventanas emergentes, atrapa el foco dentro de ellos mientras estén abiertos para que no se pueda enfocar nada que quede detrás. La mayoría de bibliotecas de diálogos y el elemento nativo <dialog> ya lo hacen automáticamente.

Cómo lo comprueba Silktide

  1. Simula a una persona usuaria con teclado recorriendo con la tecla Tab todos los elementos enfocables, tanto en la vista de escritorio como en la móvil de la página.
  2. Simula que el navegador desplaza verticalmente cada elemento enfocado hasta el centro de la pantalla (consulta la nota sobre el desplazamiento más abajo).
  3. Comprueba si hay algún otro elemento situado por encima del elemento enfocado. Se ignoran las superposiciones con fondos transparentes o semitransparentes, ya que el indicador de foco sigue siendo visible a través de ellas.
  4. Marca el control si cualquier parte queda cubierta por un elemento opaco. Si solo necesitas cumplir el Nivel AA, los casos completamente cubiertos son los que informa Foco no oculto.

Por qué simulamos el desplazamiento

La cantidad que el navegador se desplaza entre pulsaciones de la tecla Tab varía según el tamaño de la ventana, por lo que que un encabezado fijo cubra o no un elemento con foco puede diferir entre pantallas que solo se llevan unos pocos píxeles de altura. Probar en 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 consistente 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 tras cargar la página

Si una página contiene un diálogo que está cerrado por defecto, Silktide asume que, mientras esté abierto, el foco no puede salir de él (que es como debe comportarse un diálogo correctamente construido). Por tanto, es posible que un diálogo defectuoso que permite que el foco se escape por detrás no se señale a menos que esté abierto cuando carga la página.

Solución de problemas

Puedo ver correctamente el elemento enfocado

Comprueba en una ventana más pequeña: los elementos ocultados por encabezados o pies de página fijos a menudo solo colisionan a ciertas alturas de ventana. Si concluyes que el elemento nunca queda oculto de forma significativa, puedes ignorar el hallazgo.

Más información

Última actualización

¿Le ha resultado útil esta página?