Si quieres mejorar la accesibilidad de tu página web sin llenar botones y enlaces de contornos visuales innecesarios al hacer clic con el ratón, la pseudoclase CSS :focus-visible puede convertirse en una herramienta imprescindible.
:focus-visible permite mostrar un indicador de foco únicamente cuando el navegador considera que resulta útil para el usuario, algo especialmente importante cuando una persona navega mediante el teclado.
Gracias a esta pseudoclase puedes conseguir una interfaz más limpia para quienes utilizan el ratón mientras mantienes una señal visual clara para quienes navegan con Tab, Shift + Tab u otros métodos de entrada.
En este tutorial vas a aprender cómo usar :focus-visible en botones y enlaces, qué diferencia existe respecto a :focus y cómo puedes aplicarlo correctamente en cualquier proyecto web.
🔎 ¿Qué es :focus-visible en CSS?
La pseudoclase :focus-visible permite aplicar estilos a un elemento cuando este recibe el foco y el navegador determina que debería mostrar al usuario un indicador visual.
Aunque su funcionamiento guarda cierta relación con :focus, ambas pseudoclases CSS no se comportan exactamente de la misma manera.
Cuando utilizas :focus, el estilo definido puede aparecer tanto al acceder al elemento mediante el teclado como al seleccionarlo con otros dispositivos de entrada.
En cambio, :focus-visible permite que el navegador utilice diferentes criterios para decidir cuándo resulta necesario mostrar visualmente ese estado de foco.
Puedes consultar la documentación técnica sobre :focus-visible en MDN Web Docs si quieres profundizar en su comportamiento.
🎯 ¿Por qué deberías utilizar :focus-visible?
Una página web no debería diseñarse únicamente pensando en las personas que utilizan un ratón, porque muchos usuarios dependen parcial o completamente de la navegación mediante teclado.
Cuando presionas repetidamente la tecla Tab, el navegador va desplazando el foco entre enlaces, botones, formularios y otros elementos interactivos de la página.
Si eliminas completamente los estilos de foco, el usuario puede perder la referencia de qué elemento tiene seleccionado en cada momento.
Este problema puede hacer que navegar por una página sea complicado e incluso imposible para determinadas personas.
:focus-visible te permite solucionar este inconveniente manteniendo un equilibrio entre diseño visual y accesibilidad web.
⚔️ Diferencias entre :focus y :focus-visible
La diferencia fundamental está en cuándo aparece el estilo asociado al foco.
Si utilizas únicamente :focus, cualquier elemento que reciba el foco puede mostrar los estilos definidos independientemente del sistema empleado para seleccionarlo.
Por ejemplo, podrías utilizar este código:
a:focus {
outline: 3px solid #000;
}
Con esta regla, tus enlaces pueden mostrar un contorno cuando reciben el foco.
Sin embargo, puedes utilizar :focus-visible para conseguir un comportamiento más ajustado a las necesidades de la navegación accesible.
a:focus-visible {
outline: 3px solid #000;
}
Con esta alternativa, el navegador determina cuándo debe enseñar el indicador de foco según el método de interacción utilizado por el visitante.
📊 Tabla resumen de :focus-visible
| Selector | ¿Cuándo se aplica? | Uso recomendado |
|---|---|---|
:focus | Cuando un elemento recibe el foco | Casos donde quieres detectar cualquier estado de foco |
:focus-visible | Cuando el navegador considera necesario mostrar el foco | Navegación mediante teclado y accesibilidad |
:hover | Cuando el cursor pasa sobre el elemento | Efectos visuales para usuarios de ratón |
:active | Mientras se activa un elemento | Estados temporales de botones y enlaces |
:focus-within | Cuando un elemento o alguno de sus descendientes tiene el foco | Formularios, menús y componentes complejos |
Esta combinación de pseudoclases te permite crear estados interactivos coherentes para los diferentes métodos utilizados para navegar por una página.
🔗 Cómo aplicar :focus-visible a los enlaces
Aplicar :focus-visible a tus enlaces es tan sencillo como crear una regla CSS específica para ellos.
Puedes empezar utilizando este código:
a:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
La propiedad outline crea el indicador que rodeará al enlace mientras que outline-offset permite separar ligeramente el contorno del elemento.
Utilizar currentColor hace que el indicador tome como referencia el color actual del texto, aunque también puedes utilizar un color específico que ofrezca suficiente contraste con el fondo.
🔘 Cómo utilizar :focus-visible en botones
Los botones son uno de los elementos donde resulta especialmente importante proporcionar un estado de foco claramente identificable.
Puedes utilizar una regla como la siguiente:
button:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
}
Cuando navegues mediante el teclado y selecciones el botón, aparecerá un contorno que te permitirá saber inmediatamente qué botón está preparado para ser activado.
También puedes combinar diferentes propiedades CSS para crear un estilo más elaborado.
button:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 4px;
box-shadow: 0 0 0 2px #fff;
}
La clave no consiste en crear un efecto espectacular, sino en conseguir que el estado de foco sea sencillo de reconocer.
🛠️ Cómo implementar :focus-visible paso a paso
Puedes incorporar esta pseudoclase a prácticamente cualquier página siguiendo un proceso bastante sencillo.
- Localiza los elementos interactivos de tu página, prestando especial atención a enlaces, botones, campos de formulario y controles personalizados.
- Añade reglas
:focus-visiblepara que esos elementos dispongan de un indicador visual reconocible cuando reciben el foco mediante teclado. - Utiliza propiedades como
outline,outline-offset,box-shadowo cambios de fondo para crear un estado de foco suficientemente visible. - Comprueba que existe contraste suficiente entre el indicador, el elemento y el fondo de la página.
- Navega por la web utilizando únicamente la tecla Tab para comprobar que puedes identificar en todo momento el elemento seleccionado.
- Utiliza Shift + Tab para recorrer los elementos en dirección contraria y detectar posibles componentes que hayan quedado fuera del orden de navegación.
- Revisa menús, ventanas emergentes, formularios y otros elementos complejos para comprobar que el foco nunca desaparece visualmente.
🎨 Combinar :hover y :focus-visible
Puedes diseñar un botón que tenga comportamientos diferentes dependiendo de si el usuario utiliza el ratón o navega mediante teclado.
Por ejemplo:
.boton {
background: #222;
color: #fff;
padding: 12px 24px;
border-radius: 6px;
text-decoration: none;
}
.boton:hover {
background: #444;
}
.boton:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 4px;
}
Con este código, :hover proporciona información visual al usuario que utiliza el ratón mientras :focus-visible ofrece una referencia específica para la navegación mediante teclado.
Este tipo de separación ayuda a construir interfaces que funcionan correctamente independientemente de cómo interactúe cada persona con tu página web.
⚠️ No elimines el outline sin añadir una alternativa
Uno de los errores CSS más habituales consiste en eliminar completamente el contorno predeterminado mediante una regla como outline: none.
Puedes encontrarte fácilmente con código como este:
*:focus {
outline: none;
}
Aunque visualmente pueda parecer una solución elegante, puedes estar eliminando una de las principales referencias utilizadas durante la navegación mediante teclado.
Si decides modificar el contorno predeterminado, asegúrate de sustituirlo por otro indicador que permita reconocer claramente el elemento que tiene el foco.
Las recomendaciones de accesibilidad de la Web Accessibility Initiative del W3C pueden ayudarte a comprender mejor la importancia de estos indicadores dentro de una interfaz accesible.
🧩 Usar :focus-visible con campos de formulario
Aunque normalmente pensamos en botones y enlaces, también puedes utilizar :focus-visible con otros controles interactivos.
Por ejemplo:
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid #0067b8;
outline-offset: 2px;
}
Esta regla permite identificar fácilmente qué campo de un formulario está activo, algo especialmente útil en formularios largos.
También puedes utilizar box-shadow para integrar mejor el efecto dentro del diseño.
input:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 103, 184, 0.45);
}
Si eliminas outline, recuerda proporcionar siempre una alternativa visual suficientemente perceptible.
💡 Crear una regla general para toda la página
Si quieres mantener un diseño coherente, puedes definir una regla general para numerosos elementos interactivos.
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
}
Este sistema evita repetir estilos innecesariamente y mantiene un aspecto uniforme en toda la interfaz.
Después puedes crear reglas más específicas para determinados elementos cuando necesites adaptar el indicador a diferentes fondos o componentes.
📱 :focus-visible también importa en diseños responsive
Aunque :focus-visible suele relacionarse con ordenadores de escritorio y navegación mediante teclado, deberías mantener estos estilos dentro de cualquier diseño responsive.
Dispositivos táctiles, teclados externos, tecnologías de asistencia y diferentes sistemas de entrada pueden interactuar con una página de formas que no siempre puedes anticipar.
Por este motivo, es preferible diseñar siguiendo una filosofía basada en diferentes métodos de interacción en lugar de asumir que todos los visitantes utilizarán exclusivamente un ratón o una pantalla táctil.
♿ :focus-visible y accesibilidad web
Utilizar :focus-visible correctamente forma parte de una estrategia más amplia destinada a mejorar la accesibilidad de una página web.
También deberías utilizar HTML semántico, mantener un orden de navegación lógico, proporcionar textos comprensibles en los enlaces y asegurarte de que los controles pueden utilizarse mediante teclado.
Puedes consultar las Web Content Accessibility Guidelines para conocer las principales recomendaciones relacionadas con la accesibilidad del contenido web.
:focus-visible no soluciona por sí mismo todos los problemas de accesibilidad, pero te proporciona una manera sencilla de mejorar considerablemente la experiencia de navegación mediante teclado.
🧪 Cómo comprobar que :focus-visible funciona correctamente
La mejor forma de probar tus estilos consiste en dejar momentáneamente el ratón y recorrer completamente la página utilizando únicamente el teclado.
Empieza desde la parte superior del documento y pulsa repetidamente Tab para comprobar que todos los elementos interactivos reciben un indicador visible.
Comprueba especialmente los menús de navegación, botones de llamada a la acción, formularios, enlaces del pie de página y cualquier componente interactivo creado mediante JavaScript.
Si en algún momento no sabes qué elemento está seleccionado, probablemente necesitas mejorar su estilo de foco.
🚀 Mejora tus botones y enlaces con unas pocas líneas de CSS
:focus-visible es una pequeña característica de CSS que puede provocar una gran mejora en la usabilidad y accesibilidad de una página.
Con apenas unas líneas puedes mantener una interfaz limpia para quienes utilizan el ratón y ofrecer al mismo tiempo indicadores claros para quienes dependen de la navegación mediante teclado.
Empieza aplicándolo a enlaces y botones, comprueba después tus formularios y amplía progresivamente los estilos al resto de controles interactivos de tu proyecto.
Sobre todo, evita eliminar los indicadores de foco simplemente por cuestiones estéticas, porque un diseño atractivo debería ser también comprensible, navegable y accesible para el mayor número posible de personas.
