Résumé

  • Dès février 2018, le projet Selectors Level 4 du W3C distinguait l’élément qui possède le focus de celui pour lequel le navigateur juge utile de montrer ce focus : c’est le rôle de :focus-visible.
  • Les textes suivants ont précisé les indices possibles — clavier, champ de saisie, préférence du lecteur et transfert du focus par script — tout en laissant au site le dessin du repère.

Le designer clique sur un bouton et grimace : un contour s’est invité autour de sa belle couleur. Il le supprime. À la souris, rien ne semble manquer. Une autre personne arrive au clavier, appuie sur Tab, puis cherche des yeux où le prochain appui agira. Le bouton a bien reçu le focus ; la page garde le secret. Le contour a été licencié pour avoir fait exactement son métier.

Le projet W3C du 2 février 2018 nomme l’écart. :focus correspond à l’élément actif. :focus-visible demande en plus que le navigateur estime utile de rendre ce focus évident. Le texte compare un champ de saisie, dont le contenu va recevoir les frappes, à un bouton. Après Tab, le bouton a besoin d’un signe visible ; après un clic de souris, le pointeur vient déjà de le montrer. Le même objet change de contexte sans changer de nature.

Cette distinction rend au navigateur une information que le site tente souvent de deviner avec des événements clavier et souris. Le navigateur voit comment le lecteur a cheminé et connaît ses réglages. L’éditeur de la page, lui, connaît les couleurs, les contrastes et la personnalité visuelle du site. Il peut dessiner un repère franc plutôt qu’effacer le seul repère disponible. Le problème du bouton ne demandait pas une disparition ; il demandait un meilleur rendez-vous entre le moment et le dessin.

Le projet du 21 novembre 2018 montre le résultat sans timidité. Son exemple applique un épais contour jaune à tout élément qui correspond à :focus-visible ; les liens reçoivent en plus un fond jaune. Voilà un cercle qui refuse d’être une décoration honteuse. La page peut conserver son identité graphique tout en indiquant très clairement où se trouve la prochaine action.

Le texte explique ensuite les indices possibles. Un lecteur qui demande à voir toujours l’indicateur de focus a déjà tranché la question. Un champ où l’on peut taper appelle naturellement un repère. Une navigation au clavier ou à un autre dispositif sans pointeur rend la position moins évidente qu’un clic direct. Ces indications sont proposées aux navigateurs comme points de départ : la décision peut tenir compte du système, des réglages et de la manière de naviguer. La feuille de style reçoit le résultat avec :focus-visible.

La situation la plus révélatrice arrive quand un script déplace le focus. Le lecteur au clavier ouvre un panneau ; le premier bouton du panneau devient actif sans avoir été atteint par Tab. Le projet de novembre préconise de conserver un repère visible si l’élément précédent en avait un. Autrement, le lecteur verrait sa position disparaître précisément au seuil du nouveau panneau. Le texte prévoit aussi la continuité du cas inverse après un parcours commencé au pointeur. Le navigateur suit un itinéraire, pas une suite de boutons sans mémoire.

Le projet du 7 mai 2022 formule plus nettement cette séparation. :focus suit toujours le focus actuel ; :focus-visible suit les moments où le navigateur décide de le signaler. Le site peut alors modifier l’apparence du signal sans déplacer le moment où il apparaît. Le texte suggère aussi que les navigateurs utilisent ce sélecteur pour leur style de focus par défaut. La personnalisation du site et le signal natif travaillent sur le même calendrier au lieu de se marcher dessus.

Le projet du 11 novembre 2022 conserve cette logique et son historique note la clarification apportée depuis 2018. L’historique de publication du W3C permet de suivre ces étapes. Au bout du parcours, il reste une scène ordinaire : un lien, un bouton, un champ et quelqu’un qui veut savoir où ira sa prochaine touche. Le repère peut être élégant, sobre ou jaune comme un petit phare ; il doit surtout être là quand cette personne en a besoin.

Le clic garde son calme. Le clavier retrouve son adresse. Et le contour, finalement, décroche un poste de meilleure qualité.