2.4.13 Apariencia del enfoque
Criterio de éxito oficial
Cuando el indicador de foco del teclado es visible, un área del indicador cumple con todo lo siguiente: es al menos tan grande como el área de un perímetro de 2 píxeles CSS de espesor del componente desenfocado, y tiene una relación de contraste de al menos 3:1 entre los mismos píxeles en los estados enfocado y desenfocado.
Excepciones
No se evalúa si el indicador lo determina el agente de usuario y no puede ser ajustado por el autor, o si el autor no ha modificado ni el indicador predeterminado ni el color de fondo detrás del indicador.
¿Qué es?
Los indicadores de foco deben ser claramente visibles, no simplemente presentes. Este criterio define requisitos concretos de tamaño mínimo y contraste, garantizando que los usuarios puedan identificar con facilidad qué elemento está enfocado.
La forma más sencilla de cumplir es usar un contorno sólido de al menos 2 px de grosor alrededor del componente, con un color que contraste al menos 3:1 con el color que tenía ese mismo espacio cuando el componente estaba desenfocado.
Comparación: 2.4.7 vs 2.4.13
2.4.7 Enfoque visible
Exige que exista un indicador de foco visible. No especifica su forma, tamaño ni contraste.
¿Existe indicador? ✓2.4.13 Apariencia del enfoque
Define requisitos concretos de tamaño mínimo (perímetro ≥ 2 px) y contraste (≥ 3:1 entre estados). Va más allá de la mera existencia.
¿Es visible y perceptible? ✓¿Por qué es importante?
Para los usuarios que navegan con teclado, es fundamental saber qué elemento está enfocado. Sin un indicador claro, pueden desorientarse o cometer errores. Un indicador visible no es suficiente si es demasiado sutil — debe ser claramente perceptible.
Las personas con baja visión (incluyendo personas mayores) necesitan indicadores de tamaño y contraste suficientes. Un outline de 1 px en gris claro sobre fondo blanco es técnicamente «visible» pero prácticamente invisible para muchas personas.
¿Quién se ve afectado?
Personas con movilidad reducida: Usan el teclado para interactuar. Un indicador claro reduce la tensión y mejora la precisión de las interacciones.
Personas con baja visión: Quienes dependen de lupas de pantalla necesitan indicadores grandes y de alto contraste para seguir el foco al navegar.
Personas con TDAH y discapacidades cognitivas: Indicadores de foco claros ayudan a seguir su posición en la página, reduciendo la confusión.
Cómo implementar 2.4.13
Los dos requisitos clave
Área mínima
≥ 2 pxEl indicador debe tener un área al menos igual a un perímetro sólido de 2 px CSS de grosor. La forma más sencilla: un outline de 2 px.
Cambio de contraste
≥ 3:1Relación de contraste de al menos 3:1 entre los mismos píxeles en los estados enfocado y desenfocado. Cuanto mayor, más fácil de ver.
Grosor del indicador
1 px
✗ Insuficiente2 px
✓ Mínimo3 px + offset
★ RecomendadoDoble contorno
★ Mejor prácticaCambio de contraste entre estados
El criterio mide el cambio de contraste entre los mismos píxeles en estado enfocado vs. desenfocado — no el contraste con píxeles adyacentes.
Cambio de contraste: enfocado vs. desenfocado
Estilos CSS recomendados
/* Indicador básico que cumple 2.4.13 */
a:focus-visible {
outline: 2px solid #005A9C;
outline-offset: 2px;
}
/* Doble contorno: visible en cualquier fondo */
button:focus-visible {
outline: 2px solid transparent; /* Para modo alto contraste */
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}Modo de colores forzados
En el modo de alto contraste de Windows, box-shadow puede ser anulado. Al usar outline: 2px solid transparent, el navegador mantiene el estilo de foco predeterminado del sistema, garantizando visibilidad en todos los modos.
Ejemplos prácticos
Enlace Contorno alrededor del enlace con contraste suficiente
Cuando un enlace recibe el foco, se muestra un contorno de 2 px alrededor que contrasta con el fondo adyacente. El cambio de blanco a azul oscuro tiene un ratio superior a 3:1. Cumple el criterio.
Botón Contorno dentro del botón (3 px mínimo)
Al recibir el foco, se muestra un contorno de 3 px dentro del botón alrededor del texto. Al estar incrustado dentro del componente, necesita al menos 3 px para cumplir el requisito de área mínima. Contrasta con el fondo del botón con ratio superior a 3:1.
Fallo Outline de 1 px gris claro
Un botón muestra un outline de 1 px en gris claro al recibir foco. Falla el criterio 2.4.13 porque el área del indicador es inferior al equivalente de 2 px de perímetro, y el contraste de cambio puede ser inferior a 3:1.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| C40 | Uso de la técnica de doble contorno para garantizar visibilidad en cualquier fondo | CSS |
| G195 | Uso del indicador de foco visible del agente de usuario fortalecido por el autor | Suficiente |
Errores comunes
- Usar
outline: noneooutline: 0sin proporcionar un indicador alternativo. - Indicadores de foco de 1 px que no alcanzan el área mínima equivalente a 2 px de perímetro.
- Indicadores con cambio de contraste inferior a 3:1 (por ejemplo, cambiar de gris claro a gris un poco más oscuro).
- Usar solo
box-shadowsinoutline: 2px solid transparentcomo respaldo para modo de alto contraste. - Aplicar
:focusen lugar de:focus-visible, mostrando el indicador también al hacer clic.