Focus visible: cómo un anillo de foco mejora la usabilidad para usuarios de teclado
Publicado el
Cuando un usuario pulsa Tab en tu web, ¿sabe dónde está? Si has escrito outline: none en algún lugar de tu CSS, probablemente no. El focus visible —ese contorno que aparece alrededor del elemento activo al navegar con teclado— es una de las victorias más baratas de accesibilidad y, al mismo tiempo, una de las más ignoradas.
Este post explica qué es, quién lo necesita, cómo implementarlo correctamente con CSS moderno y un checklist para auditar tu web en menos de diez minutos.
1. Qué es el focus visible y por qué desaparece
La pseudo-clase :focus-visible se aplica cuando un elemento recibe el foco y el agente de usuario determina, mediante heurísticas, que el indicador de foco debe ser evidente para el usuario.
En la práctica, eso significa: el anillo aparece cuando llegas a un elemento con el teclado, pero no cuando haces clic con el ratón.
El problema histórico es diferente. Durante años, el comportamiento estándar era :focus, que mostraba el contorno en cualquier caso —clic de ratón incluido—.
Con :focus, el contorno aparecía siempre que un elemento recibía foco, incluyendo tras un clic de ratón. Esto resultaba visualmente extraño, y muchos sitios lo eliminaron con outline: none.
El resultado: usuarios de teclado perdieron su indicador de posición.
Cambiar el estilo del foco puede reducir la usabilidad; eliminarlo hace que la navegación por teclado sea inaccesible para usuarios videntes.
2. Quién navega sin ratón (y por qué es más gente de la que crees)
El focus visible no es una funcionalidad de nicho. Hay varios perfiles de usuario que dependen de él:
- Personas con discapacidad motora que usan teclado, switch o dispositivos alternativos.
- Usuarios de lectores de pantalla que combinan teclado con tecnología de asistencia.
- Usuarios de teclado por eficiencia, que tabulan por formularios o menús para ahorrar tiempo.
- Usuarios en contexto con el ratón desconectado, una pantalla táctil con teclado físico conectado, o simplemente un touchpad roto.
El argumento de “muy poca gente usa el teclado” es difícil de sostener: los analytics estándar no registran el método de entrada, así que cualquier estimación que circula sin fuente verificable es sospechosa. Lo que sí se sabe, por los informes anuales del WebAIM Million, es que la inmensa mayoría de páginas de inicio falla criterios básicos de accesibilidad por teclado. Y lo que también sabemos: una parte significativa de los usuarios con discapacidad abandona los sitios que encuentra difíciles de navegar. No puedes permitirte ignorarlo sin coste real.
3. El estándar actual: :focus-visible tiene soporte completo
La buena noticia es que el problema técnico está resuelto.
:focus-visible es una funcionalidad bien establecida que funciona en muchos dispositivos y versiones de navegadores. Ha estado disponible en todos los navegadores principales desde marzo de 2022.
:focus-visible solo coincide cuando el navegador mostraría normalmente un anillo de foco, es decir, tras pulsar Tab. Los usuarios de ratón no lo ven; los usuarios de teclado, sí.
El patrón CSS moderno es directo:
/* Elimina el outline por defecto en todos los navegadores */
*:focus {
outline: none;
}
/* Muestra el indicador SOLO en navegación por teclado */
*:focus-visible {
outline: 3px solid #2DD4BF;
outline-offset: 3px;
}Este enfoque resuelve los dos problemas a la vez: no molesta a usuarios de ratón y mantiene el indicador visible para quienes navegan con teclado.
Patrón con fallback para mayor compatibilidad
Si necesitas cubrir navegadores más antiguos, el patrón @supports es la alternativa segura:
/* Estilos base para todos los navegadores */
*:focus {
outline: 3px solid #2DD4BF;
outline-offset: 3px;
}
/* En navegadores modernos, anula :focus y usa :focus-visible */
@supports selector(:focus-visible) {
*:focus {
outline: none;
}
*:focus-visible {
outline: 3px solid #2DD4BF;
outline-offset: 3px;
}
}:focus-visible está soportado ahora en todos los navegadores principales. Se recomienda usar el selector CSS directamente en lugar del polyfill si es posible.
4. Lo que exige WCAG 2.2
La accesibilidad del foco está regulada en varios criterios de las WCAG 2.2:
SC 2.4.7 Focus Visible (Nivel AA): cualquier interfaz operable por teclado tiene un modo de operación en el que el indicador de foco es visible. Es el mínimo exigible y el punto de partida para cualquier auditoría.
SC 2.4.11 Focus Not Obscured (Minimum) (Nivel AA, nuevo en WCAG 2.2): exige que cuando un componente de interfaz recibe el foco del teclado, no quede completamente oculto por contenido creado por el autor —como headers fijos, banners o superposiciones—. En términos prácticos: al tabular por una página, el elemento enfocado debe ser al menos parcialmente visible en todo momento.
SC 2.4.13 Focus Appearance (Nivel AAA, nuevo en WCAG 2.2): es el criterio más exigente. Establece requisitos visuales medibles para el indicador de foco: el área del indicador debe ser equivalente como mínimo al perímetro de un contorno de 2 píxeles CSS de grosor alrededor del componente enfocado, y debe tener una relación de contraste de al menos 3:1 respecto a los colores adyacentes en estado sin foco. Aunque es Nivel AAA —y por tanto no obligatorio en la mayoría de marcos legales—, marca el listón de calidad al que apuntar en un diseño robusto.
Los estilos de foco predeterminados del navegador a menudo no cumplen los requisitos de SC 2.4.13. El contorno azul por defecto de Chrome suele ser suficiente, pero los valores predeterminados de Firefox y Safari pueden ser demasiado delgados o de bajo contraste. Se recomiendan estilos de foco personalizados para garantizar el cumplimiento.
5. Cómo diseñar el anillo sin romper el diseño
El argumento más habitual para eliminar el focus visible es estético: “rompe el diseño”. La solución no es eliminarlo, sino integrarlo. Tres criterios para un focus ring bien diseñado:
Contraste suficiente. El indicador debe tener al menos 3:1 de contraste respecto al fondo adyacente. Un teal vibrante sobre fondo oscuro lo supera holgadamente.
Tamaño perceptible. Un outline de 2-3 px con outline-offset de 2-4 px es visible sin resultar agresivo. El offset crea separación entre el elemento y el anillo, lo que mejora la legibilidad en cualquier fondo.
Consistencia en todo el sitio. Define el estilo de focus una vez, a nivel global, en lugar de sobreescribirlo elemento por elemento. Así evitas que algún componente quede sin indicador.
/* Definición global en el :root o en el reset de CSS */
:root {
--focus-color: #2DD4BF;
--focus-width: 3px;
--focus-offset: 3px;
}
*:focus-visible {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
border-radius: 4px; /* opcional, suaviza el anillo */
}Si tu diseño usa un fondo claro, ajusta el color: --focus-color: #0F766E tiene contraste suficiente sobre blancos y grises claros.
Caso especial: elementos con border-radius alto
Para botones muy redondeados o píldoras, el outline rectangular puede quedar desalineado visualmente. Aquí, box-shadow es una alternativa:
.button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--focus-color);
}El resultado visual es similar pero respeta el border-radius del elemento.
6. Checklist de auditoría: 5 comprobaciones en 10 minutos
Antes de cerrar este post, un checklist directo para auditar tu web ahora mismo:
1. Prueba manual con teclado. Abre tu web, desconecta el ratón y pulsa Tab repetidamente. ¿Puedes ver en todo momento qué elemento está enfocado? Si pierdes el rastro en algún punto, hay un problema.
2. Busca outline: none en tu CSS. Un grep rápido en el proyecto o una búsqueda en DevTools revelará si estás eliminando el indicador globalmente. Si aparece sin una alternativa :focus-visible, es un fallo directo.
3. Comprueba el contraste del anillo. Usa el analizador de contraste de WebAIM con el color de tu focus ring y el fondo adyacente. El objetivo es mínimo 3:1 (AA).
4. Verifica que el elemento enfocado no quede oculto. Si tienes headers o footers fijos, comprueba que al tabular ningún elemento queda completamente tapado por ellos. Es lo que exige SC 2.4.11 (Focus Not Obscured) de WCAG 2.2: el elemento enfocado no debe quedar completamente oculto detrás de headers fijos, banners de cookies, widgets de chat u otras superposiciones.
5. Prueba con el estado de zoom al 200 %. El anillo debe seguir siendo visible y no quedar cortado cuando el usuario amplia la página.
El estado real de la accesibilidad web
El focus visible es un problema extendido, no aislado. El 95,9 % de las páginas de inicio analizadas en el informe WebAIM Million de 2026 tenían fallos WCAG 2 detectables, un aumento respecto al 94,8 % de 2025, lo que revierte una tendencia de pequeñas mejoras de los seis años anteriores.
La mayoría de esos errores son evitables con cambios pequeños. La investigación indica que el criterio 2.4.7 Focus Visible sigue siendo uno de los criterios WCAG que más frecuentemente falla en las auditorías de accesibilidad.
Si quieres revisar cómo está la accesibilidad básica de tu web —focus visible incluido— y obtener un plan priorizado para cerrarla, puedes ver cómo trabajo la auditoría técnica.