:focus-visible
Correspond à un élément ayant le focus seulement quand le navigateur juge que l’indicateur doit être visible, par exemple lors d’une navigation au clavier.
Exemple
#.btn:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}<p style="margin: 0 0 10px; color: #a1a1aa;">Cliquez sur le bouton avec la souris, puis appuyez sur Tab.</p>
<div style="display: flex; gap: 8px;">
<button class="btn" type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff; font: inherit;">Enregistrer</button>
<button class="btn" type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #3f3f46; color: #fff; font: inherit;">Annuler</button>
</div>Définition et utilisation
#La pseudo-classe :focus-visible est une version plus intelligente de :focus. Le navigateur évalue lui-même si un indicateur visible sera utile à l’utilisateur. Lors d’une navigation avec la touche Tab, elle correspond toujours ; après un clic de souris sur un bouton, généralement non, car on sait déjà où se trouve le focus.
Les champs de texte sont une exception : après un clic de souris, ils correspondent à la fois à :focus et à :focus-visible, car l’utilisateur va aussitôt écrire au clavier et doit voir quel champ est actif.
Grâce à cela, vous n’avez pas à choisir entre l’apparence et l’accessibilité. Vous donnez votre propre style de focus bien visible dans :focus-visible, et les personnes qui cliquent à la souris ne voient pas de contour sur chaque bouton cliqué. Le contour par défaut des navigateurs modernes repose lui aussi sur cette pseudo-classe.
Syntaxe
#sélecteur:focus-visible { propriété: valeur; }Utilisations courantes
#- Cliquez sur le bouton avec la souris : pas de contour. Appuyez maintenant sur Tab : il apparaît, car vous naviguez au clavier.
- Pour comparer, un simple
:focus: dans la plupart des navigateurs, le contour apparaît aussi après un clic de souris. - Le champ de texte correspond aussi après un clic de souris, car vous allez bientôt y écrire.
Utilisations courantes en pratique
#input:focus-visible
input:focus-visible {
outline: 3px solid #a78bfa;
outline-offset: 2px;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’écrivez pas
:focus { outline: none }. Les navigateurs n’affichent de toute façon leur contour par défaut qu’avec:focus-visible, et le supprimer prive les personnes qui naviguent au clavier de tout repère. - Associez les effets de survol au focus clavier :
.link:hover, .link:focus-visible { … }. - Choisissez un style de focus visible sur n’importe quel fond. Un contour épais avec
outline-offsetfonctionne mieux qu’un léger changement de couleur.
Entrées associées
#- :focus vs :focus-visiblefocus cible tout élément qui a le focus, même après un clic de souris. focus-visible affiche un indicateur seulement là où le navigateur le juge nécessaire.
- :focusCorrespond à l’élément qui a le focus, c’est-à-dire qui reçoit actuellement la saisie au clavier, par exemple un champ de formulaire cliqué.
- :focus-withinCorrespond à un élément qui a lui-même le focus ou qui contient un élément avec le focus. Permet de mettre en valeur tout un formulaire ou une carte.
- :hoverCorrespond à l’élément survolé par le curseur de la souris. La base des effets de survol sur les boutons, les liens et les cartes.
- :activeCorrespond à l’élément au moment de son activation, le plus souvent quand le bouton de la souris est enfoncé sur un bouton ou un lien.
- outlineDessine un contour autour d’un élément, sans qu’il occupe de place dans la mise en page.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.