Los elementos con foco no deben quedar tapados por cabeceras fijas o capas superpuestas
Cuando una cabecera fija, una barra de cookies o una burbuja de chat tapa el elemento al que acaba de llegar quien navega con el teclado, esa persona no ve qué tiene el foco y puede activar algo que no quería. En las páginas de categoría largas puede ocurrir en casi cada fila de productos.
- ID de la regla
- vs-focus-obscured
- Origen
- Comprobación de Validiscan
- Impacto
- Grave
- Nivel de corrección
- ASSISTED
- en Shopify, Shopware, WooCommerce y Magento
- Estado
- se ejecuta
Qué hace la comprobación
Detecta elementos que quedan totalmente tapados por contenido fijo o sticky, como cabeceras, barras de cookies o widgets de chat, en el momento en que reciben el foco del teclado (2.4.11).
La comprobación toma hasta 150 elementos alcanzables con el teclado en el orden del documento, incluidos los iframe, y omite los valores negativos de tabindex y los elementos ocultos, desactivados o de tamaño cero. Cada uno recibe una llamada simple a focus(), que desplaza la página como lo hace el foco del teclado y respeta scroll-padding. Se ejecuta en cada viewport escaneado, que de forma predeterminada tiene 1440 o 390 px de ancho.
Después prueba nueve puntos: el centro, las esquinas y los puntos medios de los lados, hasta 3 px hacia dentro de los bordes. Los puntos que quedan fuera del viewport se omiten. Un punto está tapado cuando el elemento que ocupa la capa superior en ese punto es, o está dentro de, un contenedor con position: fixed o position: sticky que no contiene el elemento enfocado y tiene una opacidad efectiva de al menos 0,1.
Cuando todos los puntos probados están tapados, el elemento se convierte en un hallazgo que nombra el contenedor que tapa más puntos. Un elemento tapado solo en parte pasa a «pendiente de revisión», porque la comprobación no puede saber si la parte visible sigue mostrando qué tiene el foco. Hoy el escáner no convierte lo que está pendiente de revisión en hallazgos.
Cómo corregirlo
Defina scroll-padding-top (y scroll-padding-bottom) con la altura de las cabeceras y barras fijas para que los elementos con foco se desplacen hasta la zona visible, mantenga los botones de chat y las barras de cookies apartados del contenido de la página, y permita a los visitantes cerrar o minimizar las capas superpuestas.
Criterios de conformidad de las WCAG
- 2.4.11 Focus Not Obscured (Minimum), nivel AA
Apartados de la norma EN 301 549
| Criterio de las WCAG | Versión 3.2.1 | Versión 4.1.1 |
|---|---|---|
| 2.4.11 | sin apartado en esta versión | 9.2.4.11 |
Empiece con una revisión gratuita de su tienda.
Envíe la dirección de su tienda. Validiscan la escanea y le responde con cada fallo que el escaneo pueda demostrar, con la página y el código.
Solicitar revisión gratuitaO escriba a info@validiscan.com.
Qué cubre la revisión gratuita y qué deja fuera- Usted envía
- la dirección de su tienda
- Páginas escaneadas
- hasta 15
- Usted recibe
- todos los fallos que el escaneo puede demostrar, con la página y el código
- En su tienda
- solo páginas públicas; sin inicio de sesión, nada comprado, ningún formulario enviado
- Lo que no es
- una auditoría completa