:focus vs :focus-visible
focus 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.
Comparaison point par point
#S’applique après un clic de souris
- :focus
- Oui, dans la plupart des navigateurs, même sur des boutons
- :focus-visible
- Généralement non, sauf pour les champs de texte
S’applique après une navigation Tab
- :focus
- Oui
Qui décide d’afficher l’indicateur
- :focus
- S’applique toujours quand l’élément a le focus
- :focus-visible
- Le navigateur évalue si l’indicateur est nécessaire
Champ de texte après un clic de souris
- :focus
- S’applique
- :focus-visible
- S’applique aussi, car vous allez bientôt écrire
Support des navigateurs
- :focus
- Depuis longtemps,
widely - :focus-visible
- Plus récente, mais aussi
widely
Recommandation pour le style de focus
- :focus
- Seulement si vous voulez réagir au focus peu importe l’appareil
- :focus-visible
- Oui, c’est le standard actuel du focus visible
Exemple
#button:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}<div class="stage" style="display: flex; gap: 10px;">
<button type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #3f3f46; color: #fff;">Cliquez avec la souris</button>
</div>Cliquez sur le bouton avec la souris : pas de contour. Appuyez maintenant sur Tab : il apparaît, car vous naviguez au clavier.
Définition et utilisation
#La pseudo-classe :focus cible l’élément qui a le focus, peu importe comment il l’a obtenu : clic de souris, tap sur mobile, ou navigation avec la touche Tab. Dans la plupart des navigateurs, cliquer sur un bouton lui donne aussi le focus, c’est pourquoi le contour qui apparaît après un simple clic peut surprendre.
:focus-visible est plus intelligente. Le navigateur évalue lui-même si un indicateur de focus est nécessaire à ce moment-là. Après une navigation au clavier avec Tab, elle s’applique toujours, et après un clic de souris sur un bouton ou un lien, généralement non, car l’utilisateur voit déjà ce qu’il a cliqué. Les champs de texte sont une exception : ils correspondent aux deux, car vous allez de toute façon y écrire juste après le clic.
En pratique, mieux vaut écrire le style de focus dans :focus-visible plutôt que dans :focus. Les personnes qui cliquent à la souris ne voient alors pas de contour à chaque clic, tandis que celles qui naviguent au clavier gardent un indicateur clair. Ne retirez jamais le contour avec :focus { outline: none } sans un tel remplacement.
Syntaxe
#sélecteur:focus { propriété: valeur; }
sélecteur:focus-visible { propriété: valeur; }Plus d’exemples
#button:focus {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}<div class="stage" style="display: flex; gap: 10px;">
<button type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #3f3f46; color: #fff;">Cliquez avec la souris</button>
</div>Pour comparer : un simple :focus affiche le contour, dans la plupart des navigateurs, même après un clic de souris.
input:focus-visible {
outline: 3px solid #a78bfa;
}<div class="stage"><input placeholder="Cliquez avec la souris" style="padding: 8px 10px; border: 1px solid #52525b; border-radius: 8px; background: #18181b; color: inherit;"></div>Le champ de texte correspond à :focus-visible même après un clic de souris, car vous allez bientôt y écrire.
Bonnes pratiques
#- N’écrivez jamais
:focus { outline: none }sans remplacement dans:focus-visible, car vous privez d’orientation les personnes qui naviguent au clavier. - Stylisez l’indicateur de focus dans
:focus-visible, pour qu’il n’apparaisse pas à chaque clic de souris. - Associez les effets de survol au focus clavier :
.btn:hover, .btn:focus-visible { ... }.
Entrées associées
#- :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-visibleCorrespond à 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.
- :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.
- outlineDessine un contour autour d’un élément, sans qu’il occupe de place dans la mise en page.
- :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.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.