Foco visible con CSS: :focus-visible, outline y :focus-within

Quien navega con el teclado (por gusto, por una discapacidad motriz o porque se le descompuso el ratón) necesita ver en qué parte de la página está. Ese recuadro es el «anillo de foco». La regla outline: none que se copia de tutorial en tutorial lo borra y deja a esas personas a ciegas. Aquí, cómo mantener el foco visible con un anillo que combine con tu diseño.

El código

<form class="caja">
  <label for="correo">Correo</label>
  <input id="correo" type="email" autocomplete="email">
  <button type="submit">Suscribirme</button>
  <a href="#">Ver la política de privacidad</a>
</form>

body { font-family: system-ui, sans-serif; }
.caja {
  display: grid; gap: 8px; max-width: 18rem; padding: 16px;
  border: 2px solid #e3e8ee; border-radius: 10px;
}
/* :focus-within: la caja se marca si algo de adentro tiene el foco */
.caja:focus-within { border-color: #1e64af; }

button { padding: 8px; border: 0; border-radius: 6px; background: #1e64af; color: white; }

/* El anillo de foco, solo cuando el navegador cree que hace falta */
:focus-visible {
  outline: 3px solid #1e64af;
  outline-offset: 3px;
}
input:focus-visible { outline-offset: 0; }

Haz clic dentro del resultado y recórrelo con Tab. Medido en los tres navegadores: al enfocar el botón por código, el foco cuenta como visible (sí) y el anillo es solid 3px separado 3px; con el campo enfocado, el borde de la caja cambia a rgb(30, 100, 175).

:focus-visible frente a :focus

• :focus se activa con cualquier foco, también al hacer clic con el ratón. Por eso tanta gente lo quitaba: «al hacer clic sale un recuadro feo».
• :focus-visible se activa solo cuando el navegador cree que hace falta ver el foco: al usar el teclado, y siempre en los campos de texto (donde vas a escribir). Con el ratón, en un botón, no aparece. Es el que conviene estilizar.

outline, no box-shadow

Muchos diseños hacen el anillo con box-shadow porque respeta las esquinas redondeadas. Hoy outline también las sigue en Chrome, Firefox y Safari, y tiene una ventaja importante: en el modo de alto contraste de Windows, las sombras desaparecen y el outline no. Si de todos modos usas una sombra, deja un outline: 2px solid transparent: en ese modo, el navegador lo pinta con un color visible.

outline-offset separa el anillo del borde del elemento para que no se pierda contra un botón del mismo color.

:focus-within: marcar el contenedor

.caja:focus-within se activa cuando la caja o cualquier elemento dentro de ella tiene el foco. Sirve para resaltar el bloque del formulario que se está llenando o para abrir un submenú mientras el foco está dentro de él.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.