Damos por sentado que todo el mundo usa un mouse o un trackpad o similar para mover el puntero por toda la pantalla y hacer click en los links. Pero, ¿qué pasa cuando el puntero no está presente? Tanto si estamos en un formulario o en un menú de navegación, es imprescindible que el usuario sepa en qué elemento está parado (o haciendo foco, para ser precisos).
Ahí es donde entra a la cancha la pseudoclase CSS :focus-visible , aplaudida por algunos y abucheada por otros. En este post vamos a repasar su utilidad para la accesibilidad y el UX de nuestros sitios web.
Vamos a ello:
.
¿Qué es :focus-visible?
:focus-visible es una pseudoclase de CSS que se activa cuando un elemento recibe foco, entonces el navegador determina que debe mostrarse un marcador de ese foco, en su clásica y reconocida forma de borde con puntitos.
A diferencia de :focus, que siempre resalta el elemento (incluso al hacer click con el mouse), :focus-visible solo aplica estilos cuando el foco proviene, por ejemplo, de la navegación por teclado o de ayudas de accesibilidad.
Su utilidad para el UI/UX es:
- Accesibilidad mejorada: Al combinar :focus-visible con :focus, nos aseguramos que los usuarios que navegan a través del teclado (o lectores de pantalla) sepan en todo momento dónde está el foco y puedan moverse entre las opciones.
- Estética limpia: Evitamos mostrar ese contorno innecesario cuando el usuario hace click con el mouse, manteniendo el diseño más limpio y profesional.
- Consistencia entre navegadores: La especificación moderna está soportada en la mayoría de los navegadores recientes, garantizando que la experiencia sea uniforme.
Decía más arriba que es un efecto que ha sido abucheado por muchos (y me incluyo) porque al dibujar ese borde de línea punteada en los links, no siempre queda bonito. Podemos, con un par de líneas, evitar que aparezca y que quede todo bien a la vista. Pero a costa de sacrificar accesibilidad.
.
Fallback para navegadores antiguos
Algunos navegadores modernos ya interpretan de qué va :focus-visible de forma nativa. Pero otros no lo entienden, por lo que si aplicaste :focus-visible al CSS no funcionará. Pero don’t panic, porque hay una solución práctica: usar un polyfill. Es un un pequeño script que añade via JavaScript una clase llamada focus-visible (valga la redundancia) cuando corresponde. Por ejemplo, si el usuario navega con teclado u otros dispositivos de teclas, como los controles de los SmartTV.
Estos son los 3 pasos a seguir para implementarlo:
1- Incluir el polyfill
Descargá la librería focus-visible del WICG o linkeala desde un CDN. Agregá dentro de «<head>»
2- Escribir el CSS compatible
Escribí tus reglas para la pseudoclase y para la clase que el script va a agregar:
3- Oculta el borde cuando el enfoque viene del mouse
Para evitar mostrar el borde de puntitos al hacer click con el mouse pero que se haga visible si se usa el teclado, agregamos esto:
Así, al hacer clic no verás el contorno punteado; pero si navegás con el TAB del teclado sí se mostrará.
El polyfill detecta cuándo el foco debe hacerse visible (p. ej. por teclado) y agrega la clase .focus-visible. Ahora sí, escribí tu CSS usando :focus-visible para los navegadores que lo soportan, y usá la clase .focus-visible como respaldo.
Si preferís no agregar scripts, podés quedarte con :focus así tal cual (funciona en todos) pero ¡cuidado al ocultar indicadores visuales! La accesibilidad es lo primero.
2.
Consejos de uso
✅ Combinalo con :focus: Así te asegurás de que, en navegadores sin soporte, ningún elemento quede sin indicador de foco.
✅ Personalizá tu indicador: Lejos del clásico outline, probá sombras internas, bordes redondeados o cambios de fondo para darle un estilo único.
✅ Aplicá en formularios complejos: Inputs de texto, selectores y botones ganan claridad al usar :focus-visible, especialmente en aplicaciones web de varios pasos.
.
La pseudoclase :focus-visible es una herramienta poderosa para mejorar la accesibilidad y experiencia de usuario. Incorporarla en las hojas de estilo permite ofrecer una navegación clara para todos, sin sacrificar estética visual.
.
Cómo utilizar las Listas de Definición (DL)
Para finalizar, les dejo algunos links de referencia con ejemplos:
👉 Create Better Focus Styles with ::focus-visible (by Envato Tuts+)
👉 Developer Mozilla resources – :focus-visible
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
👉 Enfoques de estilo (by web.dev)
https://web.dev/articles/style-focus?hl=es-419
.
