Apariencia del foco

Qué exige este criterio

El criterio 2.4.7 (Foco visible) establece que el indicador debe existir. El criterio 2.4.13 (Apariencia del foco) especifica exactamente cómo debe ser. Para cumplirlo, el indicador de foco debe:

1. Tener un área al menos tan grande como un perímetro sólido de 2 píxeles CSS alrededor del control enfocado, o una línea de 1 px de grosor con la misma área total.
2. Alcanzar un contraste de 3:1 entre los estados enfocado y sin enfoque de los mismos píxeles.
3. No estar oculto por otro contenido (ámbito también de los criterios 2.4.11 y 2.4.12).

Es la primera vez que WCAG establece cifras concretas sobre el estilo del foco, y ha reformado la manera en que los sistemas de diseño gestionan los estilos de teclado. Cabe esperar que todas las auditorías de accesibilidad en 2026 lo mencionen expresamente.

Cómo cumplirlo

• Usar un contorno sólido de al menos 2 px de grosor. Patrón habitual: outline: 2px solid currentColor; outline-offset: 2px;.
• Elegir un color de foco que alcance 3:1 respecto al color adyacente, no solo respecto al fondo de página — los botones reposan sobre estados de desplazamiento, degradados e imágenes.
• Para el modo oscuro y el modo claro, definir dos colores de foco y alternarlos mediante prefers-color-scheme o mediante tokens temáticos.
• Evitar depender de un resplandor o de un anillo box-shadow de bajo contraste; si se usa box-shadow, darle un borde duro y un grosor suficiente.
• Preferir :focus-visible para que los usuarios de ratón no vean el anillo, asegurando al mismo tiempo que se active en cada foco por teclado, incluido el foco programático.

:focus-visible {
  outline: 2px solid #1d4ed8;       /* 3:1 contra blanco y fondos de desplazamiento gris */
  outline-offset: 2px;
  border-radius: inherit;
}

Fallos habituales

• Anillos de foco de 1 px (la mayoría de las librerías de componentes con valores por defecto del navegador anteriores a 2023).
• Anillos de foco en azul de marca sobre un estado de desplazamiento también en azul de marca — color idéntico, contraste 1:1.
• Foco estilizado únicamente con un box-shadow difuso sin borde definido que desaparece sobre fondos con patrones.
• Entradas personalizadas donde el estado de foco solo cambia el color del borde, sin modificar el grosor ni el contraste — demasiado sutil para ser válido.
• Anillos de foco «insertados» en botones de icono pequeños que se pintan dentro del área de impacto de 16×16 y terminan siendo invisibles detrás del glifo del icono.
• Componentes que pasan sobre fondos blancos pero fallan en la variante de modo oscuro que nadie llegó a probar.

Lista de verificación práctica de contraste

Para cada componente interactivo, hay que listar todos los estados de la superficie sobre la que puede aparecer (predeterminado, desplazamiento, pulsado, deshabilitado, en una tarjeta, en un modal, sobre una imagen de portada) y verificar que el anillo de foco alcanza 3:1 respecto a cada uno. Es una tarea tediosa; las librerías de componentes que no la realizan se publican con fallos ocultos. La automatización con Storybook, pa11y o axe-playwright amortiza el esfuerzo.

Por qué es importante

El criterio 2.4.13 cierra el escape más habitual del criterio 2.4.7: un anillo de foco que técnicamente existe pero es demasiado fino, tiene un contraste demasiado bajo o está recortado posicionalmente como para ser útil. Los usuarios con baja visión que dependen del anillo para seguir el foco obtienen una garantía medible y verificable. Los diseñadores reciben una regla clara que pueden validar antes de publicar en lugar de negociar a posteriori.

Incluso los equipos formalmente comprometidos solo con el nivel AA están adoptando ampliamente el criterio 2.4.13 como objetivo, porque los fallos son fáciles de detectar en auditorías y fáciles de utilizar en demandas judiciales. Si solo se adopta un criterio de conformidad AAA de WCAG 2.2, este es el indicado.