Focus-visible, la pseudo-classe qui met presque tout le monde d’accord

Focus-visible, la pseudo-classe qui met presque tout le monde d’accord (le 5 décembre 2022)

Toute belle histoire commence par…

Il était une fois

Il y a bien longtemps (pas tant que ça mais bon), à chaque fois que vous cliquiez sur un bouton, vous pouviez entendre un ou une PO/utilisateur/designer/dev/autre dire :

  • « Oh, cette vilaine bordure bleue ou noire est-ce qu’on pourrait l’enlever ? »
  • Mais c’est nécessaire pour les utilisateurs de clavier !
  • Oui mais c’est moche, on peut l’enlever ? À propos, je n’utilise pas mon clavier.
  • (ton qui monte) C’est nécessaire pour les utilisateurs de clavier !!!
  • Oui mais c’est laid, on peut l’enlever ? À propos, je n’utilise pas mon clavier.
  • Etc.

La cause principale de ces discussions interminables était la suivante : cliquer sur un élément active les styles de focus, comme avec le clavier.

Il était impossible de différencier un bouton activé via une souris ou un clavier (les deux avaient des styles de focus déclenchés), sauf avec des tonnes de JavaScript à coup sûr. En général, cela se finissait par un drame, un bon gros outline: 0 des familles, soit la suppression complète et entière de l’indicateur visuel pour le clavier. Nigro notanda lapillo.

C’est là que :focus-visible, anciennement appelé :focus-ring (l’idée n’est vraiment pas récente), entre en jeu pour sauver nos âmes.

Emoji focusing sur Slack, on parle de focus, donc c’est une blague absolument lamentable mais j’aime.

Le besoin

L’un des besoins les plus élémentaires lors de l’utilisation d’un clavier est de pouvoir savoir où vous vous trouvez dans l’interface.

S’il n’y a pas de surbrillance visible de l’élément actuel, l’utilisateur peut se perdre, la navigation devient vraiment pénible et une opération simple comme atteindre un lien nécessite soudainement une attention folle… ou n’est tout simplement pas possible.

Dans le langage expert de l’accessibilité, si je ne me trompe pas, dans les WCAG, c’est le Success Criterion 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible (traduction approximative : toute interface utilisable au clavier a un mode d’utilisation où le focus clavier est visible).

En pratique

Avant, on doublait les styles entre :focus et :hover, et on priait pour que ça passe côté produit sans prendre de remarque comme au début de cet article.

Là, on peut se permettre de totalement virer l’outline au :hover, et de bien renforcer ce dernier avec :focus-visible.

Quelque chose comme :

.mon-button:focus {
outline: none;
}
.mon-button:focus-visible {
outline: 3px solid chartreuse;
// je ne peux être tenu responsable du choix de cette couleur.
}

Comment :focus-visible marche

Même si l’on pourrait croire que c’est de la magie… il n’y a aucune magie là dedans. Grosso modo, le navigateur utilise certaines heuristiques pour déterminer si – selon lui – l’utilisation doit déclencher :focus-visible ou non.

TLDR : si l’utilisateur utilise le clavier.

En réalité, c’est un peu plus complexe : je vous conseille de lire la spécification de :focus-visible.

Je ne vais pas tout détailler, d’autres l’ont bien fait comme How do browsers determine when something is :focus-visible?, mais je m’arrête sur un exemple, les formulaires.

On pourrait se dire assez légitimement « si je clique sur un champ de formulaire, :focus-visible ne sera pas activé ». Sauf que non ! Si un élément – comme un champ de formulaire – a besoin du clavier pour fonctionner, il activera :focus-visible, qu’on clique dessus ou qu’on l’atteigne au clavier.

En pratique, cela se gère très facilement.

C’est pour cela que je vous invite à lire la spécification et à tester. D’expérience, j’ai vu quelques cas qui ont du sens une fois la spécification lue, mais qui peuvent surprendre (si une modale apparait subitement au lancement du site avant que l’utilisateur n’ait pu interagir, etc.).

La compatibilité

Le support est excellent sur les navigateurs récents : :focus-visible sur Can I Use. Le souci est comme d’habitude IE11 (mais on s’en fout) et quelques vieux Safari, à vous de voir si vous vous en foutez ou non.

Là où c’est gênant avec ces Safari, c’est que comme ils ne reconnaissent pas du tout :focus-visible, ils décident de purement ignorer la ligne… et parfois d’autres lignes factorisées avec. Ce qui amène à des commentaires amusants.

Au pire, vous avez un outil magique pour déployer en douceur : @supports selector(:focus-visible) {. En clair, si :focus-visible est supporté, alors… faire quelque chose.

Il a pu m’arriver de le déployer en douce, et – constatant que personne n’avait rien trouvé à redire en 6 mois – d'annoncer fièrement que c’était en production depuis une demi-année sans que personne ne s’en soit jamais plaint.

Pour conclure

Cette pseudo-classe est un régal à utiliser, et elle permet enfin de concilier demandes de designs et accessibilité, voir de même séparer totalement l’expérience clavier du reste. Albo notanda lapillo.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1716


Aucun commentaire pour le moment.

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.