Le combat le plus ancien en CSS : les utilisateurs de souris détestent la bague de mise au point qui s'affiche à chaque clic, les utilisateurs de clavier meurent sans elle. Les navigateurs ont résolu l'appel de jugement lui-même avec la pseudo-classe focus-visible : elle correspond au focus de style clavier et ignore le focus de style souris.
/* default: remove only for pointer focus, not for keyboard */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}Les trois règles
- Ne retirez jamais l'indicateur visible pour les utilisateurs de clavier : avec la mise au point visible, retirer l'anneau et le remettre en place à la main donne un contrôle total sur la conception.
- Le navigateur choisit l'heuristique : correspondances visibles pour la navigation au clavier, mixtes pour ignorer les clics de souris sur la plupart des interactions.
- Chaque contrôle focalisé a toujours besoin de son anneau : focus-visible s'adapte à l'anneau, il ne crée pas de comportement de focus.
Une partie subtile à respecter
Focus programmatique : l'appel focus() sur un saut de lien ou sur une cible de message d'erreur. Les navigateurs diffèrent quant à savoir si ce focus est visible ; définissez explicitement l'interaction dans votre feuille de style et testez une fois avec l'onglet et une fois en cliquant, préférez visible pour les deux en cas de doute. Une sonnerie manquée sur un lien de saut est un rapport de lecteur d'écran et non un accident de conception.
Ce site conserve la bague par défaut de la plate-forme, assortie d'une couleur claire de la marque. Les WCAG 2.2 ont fait de la focalisation visible un critère de réussite explicite ; la pseudo-classe qui fait le bonheur des deux publics est très gacor et plus ancienne que la controverse qu'elle résout.