Pourquoi l'anneau de focus n'est pas une verrue

Il existe une ligne de CSS que presque tout le monde a écrite au moins une fois :

:focus {
  outline: none;
}

Elle a l’air inoffensive. Elle retire un contour bleu que le navigateur dessine autour du bouton qu’on vient d’atteindre, et que beaucoup de gens trouvent laid.

Pour qui se sert d’une souris, le focus est presque invisible : le pointeur indique la position, et le contour ne fait que doubler une information qu’on a déjà.

Pour qui navigue au clavier, à la commande vocale, ou avec un contacteur, le focus est la position. C’est le seul endroit où la prochaine touche va agir. Sans indicateur visible, il faut appuyer sur Tab et deviner. C’est comme déplacer un curseur de texte invisible.

Ne pas retirer le contour : le dessiner mieux. Depuis que :focus-visible existe, le navigateur sait déjà distinguer un focus donné par le clavier d’un focus donné par un clic. Le contour n’apparaît donc que quand il sert.

:focus-visible {
  outline: 3px solid var(--couleur-focus);
  outline-offset: 3px;
}

Le décalage n’est pas cosmétique. Il fait que la couleur voisine de l’anneau est toujours le fond de la page, jamais celui du bouton entouré. Sans lui, un anneau bleu autour d’un bouton bleu n’a aucun contraste avec ce qu’il entoure.

C’est exactement ce que fait ce site, et vous pouvez le vérifier : appuyez sur Tab.