:focus es el chivato que delata al falso diseñador. Es esa línea azul que la mayoría borra con un cobarde outline: none para que su diseño “quede limpio”. Pero el foco no es un estorbo estético: es el puto mapa para quien navega sin ratón. Quitarlo no es minimalismo; es clasismo digital.
Este artículo no es una guía de estilos de foco. Es un manifiesto para entender por qué la visibilidad de :focus no es negociable y cómo convertir una obligación de accesibilidad en una firma de carácter y profesionalidad.
Acto I — La mentira de la medianía
Dogma reproducido:
“El outline del navegador es feo y estropea mi diseño. Lo quito y ya está.”
Autopsia:
Un formulario de contacto con un diseño impecable. Campos alineados, labels flotantes, un botón con un :hover que es pura seda. Un usuario intenta rellenarlo usando el tabulador de su teclado. Pulsa Tab. Nada. Vuelve a pulsar. Nada. El foco se mueve, sí, pero es un fantasma. El usuario no sabe dónde coño está. Abandona.
Causa: se priorizó una estética de Dribbble por encima de la funcionalidad básica.
Consecuencia: una experiencia frustrante, clientes potenciales perdidos y una demanda por falta de accesibilidad esperando a la vuelta de la esquina.
Evidencia mínima:
Tasa de abandono del 65% en el primer campo del formulario para usuarios de teclado (medido con seguimiento de eventos).
Fallo automático en cualquier auditoría de accesibilidad (WCAG 2.4.7 Focus Visible).
Smells — síntomas de interfaz clasista:
- :focus { outline: none; } en el CSS.
- Efectos :hovercojonudos sin un :focus o :focus-visible equivalente.
- Componentes que “atrapan” el foco y no te dejan salir (modales del infierno).
Contraejemplo rápido:
El crimen y la solución en una línea.
CSS
/* El Crimen (1 línea de código, 1 millón de usuarios frustrados) */
*:focus { outline: none; }
/* La Solución Mínima Decente (respeta al usuario, no a tu ego) */
*:focus-visible {
outline: 2px solid #0066ff;
outline-offset: 2px;
}
Explicación:
:focus-visible es el hermano listo. Solo muestra el indicador de foco cuando es útil (navegación por teclado), no cuando haces clic con el ratón. No tienes excusa para no usarlo.
Acto II — La verdad
Visión:
El foco no es un error a ocultar, es un narrador visual. Es la linterna que guía al usuario en la oscuridad de una interfaz. Nuestro trabajo no es apagar la linterna, sino diseñarle una montura que sea parte del arma.
Modelo operativo:
Visibilidad → Coherencia → Contexto → Respeto.
El foco debe ser visible sin ambigüedad, coherente con la marca, contextual a la interacción y respetuoso con las preferencias del usuario.
Táctica 1 — outline es tu amigo, no tu enemigo
El outline no provoca layout shift. Es tu opción más robusta y performante. Aprende a amarlo y a darle estilo. outline-offset te permite separarlo del borde para que respire.
Táctica 2 — box-shadow como alternativa con clase
Si el outline te sigue pareciendo tosco, usa un box-shadow. Te da más control sobre el estilo (bordes redondeados, desenfoque). Es menos performante, pero para interacciones clave, es un arma válida.
Táctica 3 — :hover y :focus-visible van de la mano
Son un puto equipo. Si diseñas un estado para uno, diseñas el mismo o uno equivalente para el otro. Siempre.
CSS
.btn:hover,
.btn:focus-visible {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,.2);
}
Demostración mínima:
Un botón que respeta a todo el mundo.
HTML
<button class="btn-focus">Púlsame (con ratón o teclado)</button>
CSS
.btn-focus {
border: 2px solid #333;
padding: .5rem 1rem;
background: #fff;
transition: all .2s ease;
}
/* Quitamos el outline por defecto SÓLO si vamos a poner algo mejor */
.btn-focus:focus { outline: none; }
/* Y aquí viene el estilo que no es una chapuza */
.btn-focus:hover,
.btn-focus:focus-visible {
background: #333;
color: #fff;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
}
Explicación:
El botón reacciona igual al ratón y al teclado. Y el estado de foco no es un anillo azul genérico, es una declaración de marca.
Acto III — El manifiesto
Principios no negociables:
- :focus { outline: none; } está prohibido. Sin excepciones.
- Todo elemento interactivo debe tener un estado :focus-visible claro.
- El contraste del indicador de foco debe ser, como mínimo, de 3:1 con el fondo.
- El foco nunca debe quedar atrapado en un componente.
- El orden del foco debe ser lógico y predecible.
Definición de hecho (DoD):
- Se puede navegar por toda la página usando solo el tabulador y ver siempre dónde coño está el foco.
- Los estados :hover y :focus-visible son coherentes.
- El diseño del foco está documentado en la guía de estilos.
Métricas de guardarraíl:
- Tasa de éxito en tareas de formulario con teclado > 95%.
- 0 errores de «Focus Visible» en auditorías de Lighthouse.
Plan de acción en 24h:
- Busca y elimina cualquier outline: none de tu CSS.
- Añade una regla global para :focus-visible que sea visible y no dé vergüenza.
- Revisa el :hover de tu botón principal y añádele un :focus-visible equivalente.
- Navega tu propia web con el tabulador. Si te pierdes, tienes trabajo que hacer.
El foco no es un adorno. Es la puta dignidad del usuario. Si no la respetas, no mereces llamarte diseñador. Es así de simple.
Preguntas frecuentes sobre :focus en CSS
¿Qué es :focus en CSS?
Es una pseudoclase que se activa cuando un elemento (como un enlace, botón o campo de formulario) recibe el foco, generalmente a través de la navegación por teclado o un clic.
¿Por qué es malo quitar el outline con :focus { outline: none; }?
Porque elimina cualquier indicador visual para los usuarios que navegan con teclado, dejándolos completamente ciegos sobre dónde se encuentran en la página. Es un crimen de accesibilidad.
¿Cuál es la diferencia entre :focus y :focus-visible?
:focus se activa con cualquier método (clic, teclado). :focus-visible es más inteligente: solo se activa cuando el navegador cree que el indicador de foco es útil para el usuario (principalmente, navegación por teclado). Esto evita que el «anillo azul» aparezca al hacer clic en un botón con el ratón.
¿Cómo diseño un estado de foco que sea bonito y accesible?
Usa box-shadow en lugar de outline para más control creativo. Asegúrate de que el indicador tenga un alto contraste con el fondo. Y mantenlo coherente con el estilo de :hover.
¿El estado de foco afecta al rendimiento?
Un outline o un box-shadow simple tienen un impacto despreciable en el rendimiento. Las animaciones complejas en el estado de foco, como en cualquier otro estado, deben usarse con precaución.
Pablo Rodríguez: el crítico implacable
¿Qué opinas de :focus?
:focus es la línea en la arena. Es el detector de metales que pita cuando un impostor intenta colarse en el club de los profesionales. Es la prueba del algodón que separa al que diseña «dibujitos bonitos» del que construye herramientas funcionales.
El 99% de los «pseudo-diseñadores» que pululan por ahí suspenden esta prueba. Y la suspenden con una sola línea de código, la más cobarde y miserable de todo el maldito CSS: :focus { outline: none; }.
Cuando veo esa línea, no veo código. Veo una declaración de principios. Veo a un «profesional» que está dispuesto a dejar ciego a un porcentaje de sus usuarios a cambio de que su diseño no tenga un «anillo azul feo». Es el acto de egoísmo y de incompetencia más grande de nuestro oficio.
La Sentencia
:focus no es un efecto. Es respeto. Es la prueba irrefutable de que has diseñado una herramienta para seres humanos, no solo un cuadro para tu portfolio. Ignorarlo no es un «descuido estético». Es una declaración pública de que eres un puto aficionado. Y nosotros, colega, no entrenamos aficionados. Nosotros forjamos profesionales.