: focus visible - Astuces CSS | CSS Almanach 2025

La :focus-visiblepseudo-classe (également connue sous le nom de pseudo-classe «Focus-Indicated») est un moyen CSS natif de styliser des éléments qui:

Sont au point
Besoin d'un indicateur visible pour montrer le focus (plus à ce sujet plus tard)

:focus-visibleest utilisé de la même manière que :focus: pour attirer l'attention sur l'élément qui a actuellement le focus.

.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )

:focus-visiblefait partie du brouillon de travail des sélecteurs CSS4. Avant l'adoption, Mozilla a introduit la :-moz-focusringpseudo-classe pour apporter la fonctionnalité à Firefox avant une spécification formelle.

Pourquoi avons-nous besoin de: focus visible?

Ne fait pas :focusça déjà? Oui, mais il y a des problèmes. L'illustration la plus claire est un bouton qui déclenche du JavaScript. Imaginez un carrousel d'images avec des boutons pour basculer entre les images. Disons que vous avez ajouté un tabindexaux boutons pour qu'ils puissent être sélectionnés avec un clavier, mais lorsque vous allez tester le carrousel avec votre souris, vous voyez ce contour autour de votre magnifique bouton:

Contour ajouté par le navigateur sur `:focus`

Non pas que vous souhaitiez le faire (pour des raisons d'accessibilité), mais comment vous en débarrasser? En définissant la :focuspseudo-classe:

.next-image-button:focus ( outline: none; )

Maintenant, votre bouton a fière allure lorsqu'il est au point, mais que se passe-t-il lorsqu'un utilisateur accède à votre bouton sans souris mais avec un clavier? Ils ne peuvent pas voir où ils ont tabulé! C'est un problème car maintenant il n'y a aucun moyen de savoir quel bouton est focalisé pour les actions du clavier:

L'un d'eux est ciblé, mais vous ne pouvez pas le voir!

Existe-t-il un moyen de supprimer le contour bleu du focus tout en affichant un focus plus conforme à la conception du site? Bien sûr, vous pouvez avoir votre gâteau et le manger aussi, grâce à :focus-visible!

:focus-visiblene s'applique que lorsque vous souhaitez réellement qu'un indicateur visuel aide l'utilisateur à voir où se trouve le focus. En d'autres termes, il ne peut pas cacher le contour comme le :focuspeut. (Eh bien, cela pourrait en le mélangeant dans le design, mais peu importe.) Les deux doivent être utilisés ensemble dans ce sens. Ajoutons-en un à notre bouton:

.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )

Maintenant, lorsque le clavier est utilisé pour tabuler sur le bouton, il y aura une indication visuelle du focus:

Comment les navigateurs déterminent-ils si quelque chose est: visible par le focus?

Les navigateurs ont une certaine marge de manœuvre pour déterminer quand ce pseudo-sélecteur doit être appliqué à un élément donné en utilisant leurs propres heuristiques. Tout d'abord, examinons le brouillon de travail CSS4, puis nous essaierons de le décomposer. À partir des spécifications:

Si un utilisateur a exprimé une préférence (par exemple via une préférence système ou un paramètre de navigateur) pour toujours voir un indicateur de focus visible, l'agent utilisateur doit respecter cela en ayant: focus-visible toujours correspondre à l'élément actif, indépendamment de tout autre facteurs. (Une autre option peut être pour l'agent utilisateur d'afficher son propre indicateur de focus quel que soit le style de l'auteur.)

Tout élément qui prend en charge la saisie au clavier (comme un élément d'entrée, ou tout autre élément qui peut déclencher l'affichage d'un clavier virtuel sur le focus si un clavier physique n'est pas présent) doit toujours correspondre: focus-visible lorsqu'il est mis au point.

Si l'utilisateur interagit avec la page via le clavier, l'élément actuellement focalisé doit correspondre: focus-visible (c'est-à-dire que l'utilisation du clavier peut changer si cette pseudo-classe correspond même si cela n'affecte pas: focus).

Si l'utilisateur interagit avec la page via un dispositif de pointage, de sorte que le focus soit déplacé vers un nouvel élément qui ne prend pas en charge l'entrée utilisateur, l'élément nouvellement focalisé ne doit pas correspondre: focus-visible.

Si l'élément actif correspond à: focus-visible, et qu'un script entraîne le déplacement du focus ailleurs, l'élément nouvellement focalisé doit correspondre: focus-visible.

Inversement, si l'élément actif ne correspond pas: focus-visible, et qu'un script provoque le déplacement du focus ailleurs, l'élément nouvellement focalisé ne doit pas correspondre: focus-visible.

Si c'est un peu abstrait, voici une interprétation:

Situation	Est-ce que: le focus visible s'applique?
L'utilisateur dit qu'il souhaite toujours que le focus soit visible via un paramètre	Oui
Un élément a besoin d'un clavier pour fonctionner (comme du texte)	Oui
L'utilisateur navigue avec un clavier	Oui
L'utilisateur navigue avec un périphérique de pointage (comme une souris ou un doigt sur un écran tactile)	Non
Un script fait passer le focus d'un `:focus-visible`élément à un autre élément	Oui
Un script fait passer le focus d'un non- `:focus-visible`élément à un autre élément	Non

Il convient de le répéter: ce sont des lignes directrices, et les navigateurs seront en mesure de déterminer eux-mêmes ce qui est sélectionné par :focus-visible. On peut s'attendre à ce que le cas évident de la navigation au clavier soit géré de manière prévisible, mais les navigateurs ont la capacité de faire eux-mêmes la détermination, comme toute autre fonctionnalité.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.