SCR31Resaltar con JavaScript el elemento que tiene el foco

Por qué es importante

Quien navega con teclado necesita ver en todo momento dónde está. El contorno que pone el navegador por defecto a veces es fino, gris o casi invisible sobre ciertos fondos.

Sin un foco visible, la persona no sabe qué enlace se activará al pulsar Intro. Es como usar el ratón sin ver el puntero.

Cómo se hace

1. Escuche los eventos focusin y focusout (o focus y blur en cada elemento).
2. Cuando un elemento reciba el foco, añádale una clase que cambie el fondo, el borde o el contorno con buen contraste.
3. Cuando lo pierda, quite la clase para que recupere su aspecto habitual.
4. Aplíquelo a todos los elementos interactivos: enlaces, botones, campos y controles personalizados.
5. Hoy lo más sencillo es hacerlo solo con CSS, por ejemplo a:focus-visible { outline: 3px solid #000; }. Use el script cuando necesite más control.

Cómo comprobarlo

1. Recorra toda la página con la tecla Tab, de principio a fin.
2. En cada parada, compruebe que se ve con claridad qué elemento tiene el foco.
3. Pulse Mayús + Tab para retroceder. El resaltado debe desaparecer del elemento que pierde el foco.
4. Revíselo sobre fondos claros y oscuros, como la cabecera o el pie de página.

Ejemplo

Fondo amarillo y contorno negro en cualquier elemento que recibe el foco.

<style>
  .con-foco { background: #ffd200; outline: 2px solid #000; }
</style>
<script>
document.addEventListener('focusin', function (e) {
  e.target.classList.add('con-foco');
});
document.addEventListener('focusout', function (e) {
  e.target.classList.remove('con-foco');
});
</script>