2.4.11 Enfoque no oscurecido (mínimo)
Criterio de éxito oficial
Cuando un componente de la interfaz de usuario recibe el foco del teclado, el componente no queda completamente oculto debido al contenido creado por el autor.
Notas sobre el alcance
Si el contenido que oscurece es reposicionable por el usuario, solo se evalúan las posiciones iniciales por defecto del contenido. Si el usuario puede revelar el componente enfocado sin mover el foco (por ejemplo, con la tecla Escape), se considera que el criterio se cumple.
Relación con 2.4.12 (AAA)
Este criterio (AA) exige que el elemento enfocado no quede completamente oculto. El criterio 2.4.12 (AAA) va más lejos: ninguna parte del componente puede quedar oculta por el contenido del autor.
¿Qué es?
Cuando un usuario navega por una página con el teclado, el elemento que recibe el foco debe ser al menos parcialmente visible. Si el elemento queda completamente cubierto por contenido superpuesto (como un banner de cookies, un encabezado fijo o un chat de soporte), el usuario pierde la referencia visual de dónde se encuentra.
Contenido que habitualmente oscurece el foco
Encabezados fijos (position: sticky)
Pies de página pegajosos
Banners de cookies
Widgets de chat de soporte
Diálogos no modales
Comparación: foco oculto vs. visible
El botón tiene foco pero el footer fijo lo cubre por completo. Falla 2.4.11.
Con scroll-padding, el botón enfocado queda visible por encima del footer. Cumple 2.4.11.
¿Por qué es importante?
Los usuarios que navegan con teclado dependen del indicador de foco para saber en qué parte de la página se encuentran. Si el elemento enfocado queda oculto por contenido superpuesto, el usuario pierde completamente la referencia visual y no puede continuar interactuando con la página de forma predecible.
Esto es especialmente crítico para personas con discapacidades motoras que usan el teclado como único dispositivo de entrada, y para personas con discapacidades cognitivas que necesitan pistas visuales claras para orientarse.
¿Quién se ve afectado?
Usuarios de teclado: Dependen del indicador de foco para navegar. Si el elemento está completamente oculto, no saben qué elemento tiene el foco ni cómo interactuar con él.
Personas con baja visión: Usan ampliación de pantalla. Si el elemento enfocado queda tapado por una capa superpuesta, la zona ampliada no les ayuda a encontrarlo.
Personas con discapacidades cognitivas: Necesitan saber siempre dónde están en la página. La pérdida del foco visible les genera confusión y puede impedir completar tareas.
Cómo implementar 2.4.11
Prueba de verificación
Para verificar el cumplimiento: navega por la página usando únicamente el teclado (Tab y Shift+Tab). Comprueba que en ningún momento el elemento enfocado queda completamente oculto por otro contenido —como un encabezado fijo, un footer sticky, un banner o un widget superpuesto.
Solución principal: scroll-padding
La técnica más efectiva es añadir scroll-padding al elemento raíz para dejar espacio libre que compense la altura del contenido superpuesto. Esto garantiza que al navegar con teclado, el elemento enfocado aparezca en una zona visible de la pantalla.
/* Compensar encabezado fijo de 64px y footer pegajoso de 80px */
html {
scroll-padding-top: 80px; /* Margen superior = altura del header fijo */
scroll-padding-bottom: 96px; /* Margen inferior = altura del footer sticky */
scroll-behavior: smooth;
}Estrategias por tipo de contenido
Encabezados fijos
Usa scroll-padding-top con un valor igual o superior a la altura del header. Actualízalo si el header cambia de altura.
Footers pegajosos
Usa scroll-padding-bottom o asegúrate de que el footer no superpone el área de contenido al navegar con teclado.
Banners de cookies
El banner debe poder descartarse con la tecla Escape. Al descartarse, el criterio pasa a cumplirse automáticamente.
Widgets de chat
Posiciona el widget de forma que no solape el área de contenido principal, o incluye un modo para minimizarlo con teclado.
Diálogos no modales
Usa z-index con cuidado y asegúrate de que los diálogos no modales sean descartables con Escape para liberar el área de foco.
Ejemplos prácticos
Encabezado fijo Enlace de navegación oculto por header sticky
Al navegar con Tab por los enlaces del menú de navegación, el último enlace queda completamente tapado por la barra de navegación fija al hacer scroll. Falla 2.4.11. Solución: añadir scroll-padding-top igual a la altura del header.
Banner de cookies Botón de formulario cubierto por el banner
Un banner de consentimiento de cookies ocupa la parte inferior de la pantalla. Al llegar con Tab al botón «Enviar», queda completamente tapado. Falla 2.4.11. Si el banner puede cerrarse con Escape antes de que el foco llegue al botón, el criterio se cumple.
Correcto Footer fijo con scroll-padding compensado
La página tiene un footer fijo de 72px. El CSS del sitio incluye scroll-padding-bottom: 88px. Al navegar con Tab, todos los elementos enfocados quedan visibles por encima del footer. Cumple 2.4.11.
Excepción Tooltip descartable con Escape
Un tooltip aparece sobre un elemento enfocado. Si el usuario puede cerrarlo con Escape sin mover el foco, el criterio se cumple, aunque el tooltip tape momentáneamente el elemento enfocado.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| C43 | Usar scroll-padding para desplazar el contenido fuera de los elementos de posicionamiento fijo | CSS |
Errores comunes
- Encabezados fijos o footers sticky sin
scroll-paddingcompensatorio que ocultan completamente el elemento enfocado. - Banners de cookies persistentes que no se pueden descartar con teclado y cubren los elementos enfocados.
- Widgets de chat de soporte posicionados de forma que solapan el contenido principal al navegar con teclado.
- No probar la navegación con teclado después de añadir elementos con
position: fixedoposition: sticky.