Foco visible
Toda interfaz manejable mediante teclado debe mostrar un indicador de foco visible sobre el elemento que lo tiene en cada momento. Si el usuario no puede ver dónde se encuentra el foco del teclado, no puede usar el sitio mediante teclado. Es uno de los criterios de conformidad más citados en las auditorías.
Qué exige este criterio
Siempre que cualquier elemento interactivo recibe el foco del teclado, el navegador — o el CSS de la página — debe mostrar un indicador visible que señale qué elemento está enfocado. El criterio de conformidad no dicta el aspecto del indicador; eso corresponde a 2.4.13 en nivel AAA. Solo exige que algo sea visible. El fallo clásico es *:focus { outline: none; } sin ningún reemplazo.
Este criterio se aplica a todo elemento que pueda recibir el foco: enlaces, botones, campos de formulario, componentes personalizados, iframes y cualquier elemento con tabindex. Se aplica tanto si el usuario llegó a ese elemento mediante Tab, Shift+Tab o una llamada programática a focus().
Cómo cumplirlo
- No escribir nunca
outline: none(nioutline: 0) sin un reemplazo inmediato. Usar:focus-visiblepara limitar el anillo personalizado a los usuarios de teclado si se desea suprimirlo al hacer clic con el ratón. - Proporcionar un estilo de foco con contraste y grosor suficientes para ser evidente: un anillo sólido de 2 px con una relación de contraste de 3:1 respecto al fondo adyacente es la base conservadora recomendada.
- Para controles claros sobre fondo claro, usar un anillo oscuro (o viceversa). Un anillo gris sobre un estado hover gris es la trampa clásica de invisibilidad.
- Los componentes personalizados (cuadro combinado, lista desplegable, menú) deben mover el foco a la opción activa y mostrar sobre ella un indicador visible.
- Probar navegando con Tab por toda la página desde la barra de direcciones. Cada parada debe ser evidente sin necesidad de forzar la vista.
Fallos habituales
- Restablecimiento global:
*:focus { outline: none; }en el CSS base, nunca reañadido. - Bibliotecas de componentes que incluyen un anillo de 1 px con bajo contraste que coincide con el color de marca sobre un gradiente de cabecera: invisible en la práctica.
- Indicador de foco oculto tras una cabecera fija al desplazarse (véase 2.4.11 — misma causa raíz, criterio de conformidad diferente).
- Botones que cambian el color de fondo en
:hoverpero no en:focus, de modo que los usuarios de teclado no reciben ninguna señal. - Listas desplegables personalizadas donde el foco se mueve a un elemento
<li>fuera de pantalla y nada cambia visualmente. - Diseñadores que reemplazan el anillo por una sombra diminuta invisible sobre fondos complejos.
Cómo encaja :focus-visible
Los navegadores exponen :focus-visible para distinguir el foco de teclado del foco de ratón. El patrón recomendado es:
:focus { outline: none; }
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}Esto mantiene los clics de ratón limpios y proporciona a los usuarios de teclado un indicador. Compatible con todos los navegadores modernos a partir de 2026.
Por qué es importante
El foco visible es el criterio de conformidad más citado en las auditorías de accesibilidad de teclado y posiblemente el de mayor impacto. Un sitio que no cumple 2.4.7 es inutilizable mediante teclado, aunque cumpla todos los demás criterios. Los usuarios con discapacidades motoras, los usuarios con deficiencia visual que emplean lupas y los usuarios con lesiones en las manos pierden el acceso. Los usuarios de teclado en dispositivos móviles (teclados Bluetooth externos en tabletas) se encuentran con la misma barrera. Corregirlo suele consistir en una única regla CSS, lo que hace aún más llamativa la persistencia de este fallo en toda la web.