css-hidden-focus
Los elementos enfocables no deben estar ocultos visualmente
Comprueba que los elementos enfocables por teclado no estén ocultos visualmente mediante técnicas CSS que puedan dejarlos en el orden de tabulación.
Ámbito de aplicación. Se aplica a elementos que son tabulables (enfocables por teclado) pero están ocultos visualmente mediante técnicas CSS que pueden dejarlos en el orden de tabulación.
Resultado esperado. Ningún elemento debería ser tabulable mientras está oculto visualmente (por ejemplo, opacity:0, recortado, fuera de pantalla). Un elemento que el CSS vuelve a hacer visible cuando recibe el foco no está oculto mientras tiene el foco, y no se marca: el patrón habitual del enlace de salto (.skip { position: absolute; left: -9999px } .skip:focus { left: 0 }), o una regla de ocultación que deja de aplicarse con el foco (.visually-hidden-focusable:not(:focus) { clip: rect(0 0 0 0) }). Una regla de foco anidada en otra (.skip { &:focus { top: 0 } }) cuenta como si estuviera escrita por completo; una cuyo foco está dentro de :has() cuenta, para su sujeto, como lo hace :focus-within. Una regla de foco que no es !important no anula una declaración !important que oculta el elemento.
Qué informa un hallazgo.
metrics.visibilityHints: cómo está oculto el elemento mientras puede recibir el foco:opacityZero,offscreen,clippedozeroSizeOverflowHidden(sin tamaño, con overflow oculto) por sus propios estilos; cuando estos lo muestran,outOfReach(un contenedor está posicionado fuera de pantalla o, en un navegador, la caja que mostraría el foco está donde ningún desplazamiento llega) ocontainerClipped(un contenedor está recortado a nada, no tiene tamaño y tiene overflow oculto, o está escalado a nada, o, en un navegador, el elemento queda por completo fuera de un contenedor conoverflow: clip, que el foco no desplaza).runtimeProbe:nullsalvo que enfocar el elemento haya movido el foco directamente a otro elemento (cssHiddenTabbable_runtimeRedirect_needsReview). En ese caso contieneredirected: truey la etiqueta y el id del elemento al que pasó el foco (redirectedToTag,redirectedToId). Solo se prueba así con los tres primeros elementos ocultos.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<a href="/x" style="opacity:0;">Hidden but tabbable link</a>
El enlace permanece en el orden de tabulación a pesar de que opacity:0 lo hace invisible para los usuarios de teclado videntes.
<a href="/x">Visible link</a>
El enlace es a la vez enfocable y visible: no hay nada que señalar.
<style>.skip { position: absolute; left: -9999px; } .skip:focus { left: 0; }</style><a class="skip" href="#main">Skip to content</a>
El enlace está fuera de pantalla en reposo, pero su regla :focus lo vuelve a hacer visible cuando recibe el foco.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
cssHiddenTabbable_needsFocusStateVerification
- Hacer clic justo antes del elemento que indica el informe y pulsar Tab hasta que el foco debiera llegar a él.
- Comprobar document.activeElement en la consola de las herramientas para desarrolladores para asegurarse de que el foco está en él.
- Buscar el elemento y su indicador de foco en pantalla.
Se cumple. El elemento aparece a la vista con un indicador de foco visible mientras tiene el foco.
No se cumple. El foco llega al elemento mientras sigue oculto, así que quien usa el teclado no ve dónde está el foco, lo que incumple WCAG 2.4.7.
cssHiddenTabbable_runtimeRedirect_needsReview
- Hacer clic justo antes del elemento que indica el informe y pulsar Tab hasta que el foco debiera llegar a él.
- Observar dónde queda el foco y comprobar document.activeElement en la consola de las herramientas para desarrolladores.
- Pulsar Mayús+Tab desde el control siguiente y ver si el foco se detiene en el elemento oculto o pasa de largo.
Se cumple. El foco nunca se queda en el elemento oculto: pasa directamente a un control visible, como hace el centinela de una trampa de foco.
No se cumple. El foco puede quedarse en el elemento oculto, así que quien usa el teclado no ve dónde está el foco, lo que incumple WCAG 2.4.7.