Catégories
Astuces et Design

L'astuce: focus visible | Astuces CSS

Il vaut toujours la peine de le répéter: tous les éléments interactifs doivent avoir un style de focus. De cette façon, un utilisateur de clavier peut savoir quand il a déplacé le focus sur cet élément.

Mais si vous utilisez :focus seul pour cela, il a un effet secondaire que beaucoup de gens n'aiment pas. Cela signifie que lorsque vous cliquez (avec une souris) sur un élément interactif, vous voyez le style de focus. On peut soutenir que vous n’avez pas besoin de ces commentaires en tant qu’utilisateur de la souris, car vous venez de déplacer votre curseur là-bas et de cliquer. Quoi que vous pensiez de cela, cela a énervé tellement de gens au fil des ans qu’ils ont complètement supprimé les styles de focus, ce qui est une perte nette pour l’accessibilité sur le Web.

Et si nous pouvions appliquer des styles de focus uniquement lorsque le clavier est utilisé pour focaliser quelque chose, pas la souris? Lea Verou a mis le doigt dessus il y a quelques années:

C'était en réponse à la suppression de la fonctionnalité par Chrome derrière un drapeau. Intelligent intelligent.

Avance rapide de quelques années, Chrome le publie sans drapeau. Ils sont d'accord avec l'idée de Lea:

En combinant :focus-visible avec :focus vous pouvez aller plus loin et proposer différents styles de focus en fonction du périphérique d'entrée de l'utilisateur. Cela peut être utile si vous souhaitez que l'indicateur de mise au point dépende de la précision du périphérique d'entrée:

/* Focusing the button with a keyboard will show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}
  
/* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Je pourrais suggérer d'essayer ces sélecteurs sans le button, ce qui les rend appliqués dans le monde entier!

Il y a plus à creuser, alors je vais relier d'autres choses ici:

  • Le billet du blog Chromium couvre l'heuristique du sélecteur. C'est compliqué. C'est comme s'il y avait un algorithme pour déterminer si :focus-visible va correspondre ou non, ce à quoi vous devez simplement faire confiance. Il couvre également l'idée que Firefox a depuis longtemps :-moz-focusring, mais le comportement est suffisamment différent pour qu’ils ne recommandent pas de l’utiliser si vous recherchez un comportement cohérent.
  • Matthias Ott a blogué à ce sujet avec de bonnes informations, comme utiliser le polyfill officiel et comment regarder correctement les styles dans DevTools (il y a une nouvelle case à cocher).
  • Nous en avons déjà parlé. En cela, nous avons noté tweeter qu'elle pensait que l'utilisation exploserait quand elle serait expédiée pour de vrai. Voyons (et espérons)!
  • Notre entrée d'almanach a un tas de détails.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *