2.4.7 Enfoque visible
Criterio de éxito oficial
Cualquier interfaz de usuario operable mediante teclado tiene un modo de operación en el que el indicador de foco del teclado es visible.
WCAG 2.2 añade 2.4.11 y 2.4.13
WCAG 2.2 añadió dos criterios más estrictos: 2.4.11 Apariencia del foco (AA) que exige contraste mínimo del indicador, y 2.4.13 Apariencia del foco (AAA) que exige mayor área. El criterio 2.4.7 es el umbral mínimo: el indicador debe existir, aunque sea el del navegador por defecto.
¿Qué es?
Cuando un usuario navega con Tab, el indicador de foco señala qué elemento está activo en cada momento. Es el equivalente visual del cursor del ratón para los usuarios de teclado. Sin él, navegar por la página es como moverse a ciegas.
Borde azul + outline amarillo
Outline oscuro con desplazamiento
Doble anillo: amarillo + oscuro
¿Por qué es importante?
El mayor error de los diseñadores CSS es eliminar el indicador de foco con outline: none o outline: 0 porque «queda feo». Esto hace el sitio completamente inutilizable para cualquier usuario que navegue con teclado.
Un indicador de foco bien diseñado puede ser visualmente atractivo y accesible al mismo tiempo. No son mutuamente excluyentes.
¿Quién se ve afectado?
Personas con discapacidades motoras: Usan el teclado o dispositivos alternativos. El indicador de foco es la única pista visual de dónde están en la página.
Personas con déficit de atención: Un indicador visible y claro les ayuda a seguir su posición mientras navegan.
Usuarios de teclado por preferencia: Usuarios avanzados y power users que prefieren el teclado también necesitan el indicador para una navegación eficiente.
Cómo implementar 2.4.7
Usar :focus-visible en lugar de eliminar outline
La pseudoclase :focus-visible muestra el indicador solo cuando es necesario (navegación por teclado), no al hacer clic con ratón:
/* ✗ NUNCA hacer esto */
*:focus {
outline: none;
}
/* ✓ Correcto: indicador visible y bien diseñado */
:focus-visible {
outline: 3px solid #003D6B;
outline-offset: 3px;
}
/* ✓ En fondos oscuros: usar color de alto contraste */
.dark-bg :focus-visible {
outline: 3px solid #FFD700;
outline-offset: 3px;
}Estilos de indicador recomendados
No confiar solo en los estilos del navegador
Los estilos de foco por defecto del navegador varían entre plataformas y pueden no ser suficientemente visibles en todos los contextos. Define siempre estilos explícitos en tu CSS.
Ejemplos prácticos
Correcto Outline personalizado visible
Un sitio usa :focus-visible { outline: 3px solid #003D6B; outline-offset: 3px; } globalmente. Todos los elementos interactivos tienen un indicador de foco claro y consistente cuando se navega con teclado.
Correcto Indicador diferente para fondo oscuro
La navegación principal tiene fondo azul oscuro. Los elementos dentro usan :focus-visible { outline: 3px solid #FFD700; } para que el indicador contraste correctamente sobre el fondo oscuro.
Fallo outline: none en todos los elementos
Una hoja de estilos de reset incluye * { outline: none; }. Ningún elemento del sitio muestra indicador de foco al navegar con teclado. El sitio es completamente inutilizable con teclado.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G149 | Usar componentes de interfaz de usuario que reciben foco usando un indicador de foco proporcionado por el agente de usuario | Suficiente |
| G165 | Usar un indicador de foco predeterminado que tenga suficiente contraste para ser visible contra todos los fondos | Suficiente |
| G195 | Usar un indicador de foco de autor visible y de alto contraste | Suficiente |
| C15 | Usar CSS para cambiar la presentación de un componente de interfaz de usuario cuando recibe foco | Suficiente |
| SCR31 | Usar script para cambiar el color de fondo o el borde de los elementos que reciben foco | Suficiente |
Errores comunes
- Usar
outline: noneooutline: 0en selectores globales como*,a,button. - Usar JavaScript para eliminar el foco (
element.blur()) inmediatamente después de recibirlo. - Indicador de foco con contraste insuficiente contra el fondo (solo outline gris sobre fondo blanco).
- No definir estilos de foco alternativos para componentes que usan fondos oscuros.