Foco no oculto (mejorado)
Versión AAA más estricta del criterio 2.4.11: cuando un elemento recibe el foco, ninguna parte del mismo puede quedar oculta por otro contenido. Nuevo en WCAG 2.2.
Qué exige este criterio
El criterio 2.4.11 permite la ocultación parcial siempre que alguna parte del elemento enfocado permanezca visible. El criterio 2.4.12 elimina esa concesión: el elemento enfocado debe estar completamente visible. Al desplazarse mediante tabulación hasta un botón, este debe mostrarse íntegro en el área de visualización sin que nada lo solape — ni la cabecera fija recortando el borde superior, ni una burbuja de chat recortando la esquina inferior derecha.
Este criterio es AAA y tiene carácter aspiracional para la mayoría de los equipos, pero es el objetivo adecuado para los sistemas de diseño empleados en el ámbito gubernamental, sanitario y educativo, donde la fiabilidad del teclado es innegociable.
Cómo cumplirlo
- Establecer
scroll-padding-topyscroll-padding-bottomen el contenedor de desplazamiento con un valor generoso — ligeramente superior a la altura total de todos los elementos fijos combinados. - Ocultar automáticamente los widgets de chat cuando un elemento enfocable se aproxime a su posición, o desplazarlos al recibir eventos de foco.
- Para los pies de página fijos, considerar alternativas no fijas, o comprimirlos al desplazarse de modo que solo cubran contenido de encabezado y nunca controles interactivos.
- Auditar todas las páginas que combinen una cabecera fija y un pie de página fijo. La «banda segura» central se reduce con rapidez, especialmente en ventanas de visualización pequeñas.
- Comprobar con zoom del navegador al 200 % y al 400 % (conforme al criterio 1.4.10 Redistribución del contenido) — los elementos fijos que funcionaban al 100 % pueden llegar a ocupar toda la pantalla a mayor escala.
Fallos habituales
- Una cabecera fija que cubre los 4 px superiores de cada anillo de foco — aceptable para 2.4.11, pero incumple 2.4.12.
- Destinos de enlace de omisión que aterrizan en la parte superior de
<main>con el anillo de foco parcialmente recortado por la cabecera fija. - Botones flotantes de «Ayuda» en la esquina inferior derecha que solapan 1 px de una esquina de los botones enfocados en esa zona.
- Banners promocionales insertados mediante etiquetas de marketing que no están contemplados en los tokens de
scroll-paddingdel sistema de diseño. - Barras de navegación inferiores en móvil donde la tabulación hasta el último campo de un formulario muestra el campo con el anillo de foco ligeramente recortado en el borde inferior.
Por qué es importante
Para los usuarios con baja visión que dependen del indicador de foco para seguir su posición, incluso un recorte parcial puede hacer que el indicador sea prácticamente invisible — un contorno de 2 px con el píxel superior recortado parece una línea de 1 px, fácilmente confundible con un borde. El criterio mejorado trata al indicador de foco como un elemento de interfaz de primera clase que merece su cuadro delimitador completo en pantalla. Comprometerse con el criterio 2.4.12 obliga a los equipos a racionalizar su presupuesto de elementos fijos, lo que con frecuencia mejora la composición para todos los usuarios.