2.4.12 Enfoque no oscurecido (mejorado)
Criterio de éxito oficial
Cuando un componente de la interfaz de usuario recibe el foco del teclado, ninguna parte del componente queda oculta por el contenido creado por el autor.
Diferencia clave con 2.4.11
El criterio 2.4.11 (AA) prohíbe que el elemento quede completamente oculto. Este criterio 2.4.12 (AAA) es más estricto: ninguna parte del componente enfocado puede quedar oculta por el contenido del autor.
¿Qué es?
Mientras que el nivel AA exige que el elemento enfocado sea al menos parcialmente visible, el nivel AAA requiere visibilidad completa: ninguna parte del componente puede quedar cubierta por contenido superpuesto al recibir el foco.
Espectro de visibilidad del foco
Completamente oculto
Falla 2.4.11 y 2.4.12
Parcialmente visible
Pasa 2.4.11 · Falla 2.4.12
Completamente visible
Pasa 2.4.11 y 2.4.12
Comparación: 2.4.11 vs 2.4.12
2.4.11 Enfoque no oscurecido (mínimo)
El componente enfocado no puede quedar completamente oculto. Que una parte quede tapada es aceptable.
Palabra clave: «completamente»2.4.12 Enfoque no oscurecido (mejorado)
Ninguna parte del componente enfocado puede quedar oculta. Se requiere visibilidad total del componente.
Palabra clave: «ninguna parte»¿Por qué es importante?
Aunque un elemento parcialmente visible supera el umbral de 2.4.11, los usuarios con baja visión que usan ampliación de pantalla pueden estar trabajando en una zona ampliada y si parte del elemento enfocado queda cubierta, es posible que no sean conscientes de qué elemento interactivo tienen seleccionado.
La visibilidad completa del elemento enfocado elimina cualquier ambigüedad y garantiza que la experiencia de navegación por teclado sea completamente predecible y orientada.
¿Quién se ve afectado?
Usuarios de teclado avanzados: Se benefician de saber exactamente qué elemento tiene el foco en todo momento, sin ambigüedad sobre partes ocultas del componente.
Usuarios de magnificación: Al ampliar la pantalla, trabajan en una zona muy reducida. El foco completamente visible evita confusiones sobre la extensión del elemento enfocado.
Personas con discapacidades cognitivas: La visibilidad completa reduce la carga cognitiva: saben exactamente qué elemento interactivo tienen seleccionado sin necesidad de inferir.
Cómo implementar 2.4.12
Prueba completa
Para verificar el cumplimiento de 2.4.12: navega con Tab por todos los elementos interactivos de la página. En ningún momento ninguna parte del elemento enfocado debe quedar tapada por contenido superpuesto (encabezados fijos, footers sticky, banners, widgets, tooltips, etc.).
Atención a superposiciones semitransparentes
Las superposiciones semitransparentes también fallan el criterio
Aunque el elemento enfocado sea visualmente perceptible a través de una superposición translúcida, si cualquier parte del componente queda oculta por contenido del autor —incluso semitransparente— se incumple 2.4.12. El criterio exige que ninguna parte quede cubierta.
scroll-padding más generoso
Para cumplir 2.4.12, el valor de scroll-padding debe ser suficientemente amplio para que todo el elemento enfocado quede visible, sin que ninguna parte quede bajo el contenido superpuesto.
/* Margen generoso para visibilidad completa (2.4.12 AAA) */
html {
/* Añadir margen extra sobre la altura del header (ej. 64px + 24px = 88px) */
scroll-padding-top: 88px;
/* Añadir margen extra sobre la altura del footer (ej. 72px + 24px = 96px) */
scroll-padding-bottom: 96px;
}Ejemplos prácticos
Pasa AA, falla AAA Botón parcialmente oculto por footer
Al llegar con Tab a un botón, la mitad inferior queda tapada por un footer pegajoso. El botón es visible a medias: pasa 2.4.11 (AA) porque no está completamente oculto, pero falla 2.4.12 (AAA) porque parte del componente queda cubierta.
Correcto AAA Scroll-padding generoso con margen extra
El sitio tiene un header fijo de 56px. El CSS incluye scroll-padding-top: 80px (56px + 24px de margen extra). Al navegar con Tab, todos los elementos enfocados quedan completamente visibles, sin ninguna parte cubierta. Cumple 2.4.12.
Semitransparente Overlay translúcido sobre elemento enfocado
Un diálogo no modal translúcido cubre parcialmente un campo de formulario enfocado. Aunque el campo es visible a través del overlay, parte del componente queda cubierta por contenido del autor. Falla 2.4.12.
Excepción Contenido reposicionable por el usuario
Un panel flotante que el usuario puede mover con el ratón oscurece parcialmente un elemento enfocado. Al ser reposicionable por el usuario, y evaluándose solo la posición inicial, si en la posición inicial no oscurece ningún elemento enfocado el criterio se cumple.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| C43 | Usar scroll-padding con margen suficiente para visibilidad completa del componente enfocado | CSS |
Errores comunes
- Usar valores de
scroll-paddingjustos (exactamente la altura del elemento superpuesto) sin margen extra, lo que puede dejar parte del elemento enfocado cubierta. - Superposiciones semitransparentes o con
opacityreducida que parcialmente cubren el elemento enfocado. - No considerar que los tooltips y popovers también pueden cubrir parte del elemento que los origina al recibir el foco.
- No volver a verificar la visibilidad completa después de cambios de diseño que alteren las alturas de headers, footers o paneles fijos.