:focus-visible
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La pseudo-classe :focus-visible
s'applique lorsqu'un élément correspond à la pseudo-classe focus
et que l'agent utilisateur détermine, via une heuristique, que le focus devrait être mis en évidence sur l'élément (la plupart des navigateurs affichent un contour en surbrillance par défaut).
Ce sélecteur peut être utile afin de fournir un indicateur de focus différent selon le mode de navigation de l'utilisateur (souris ou clavier).
On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée :-moz-focusring
. Voir la page :-moz-focusring
pour plus d'informations.
Syntaxe
:focus-visible {
}
Exemples
Exemple simple
Dans cet exemple, le sélecteur :focus-visible
utilise le comportement de l'agent utilisateur afin de déterminer lorsqu'il doit s'appliquer. Pour utiliser l'exemple, comparez ce qui se produit selon que vous utilisez une souris ou un clavier et notez la différence avec les éléments ciblés par :focus
.
HTML
<input value="Styles par défaut" /><br />
<button>Styles par défaut</button><br />
<input class="focus-only" value=":focus only" /><br />
<button class="focus-only">:focus only</button><br />
<input class="focus-visible-only" value=":focus-visible only" /><br />
<button class="focus-visible-only">:focus-visible only</button>
CSS
input,
button {
margin: 10px;
}
.focus-only:focus {
outline: 2px solid black;
}
.focus-visible-only:focus-visible {
outline: 4px dashed darkorange;
}
Choisir d'afficher l'indicateur de focus
Un contrôle personnalisé (par exemple un bouton provenant d'un custom element) peut utiliser :focus-visible
afin d'appliquer ou non un indicateur de focus pour la navigation au clavier afin de calquer au comportement natif de <button>
.
HTML
<custom-button tabindex="0" role="button">Cliquez-moi</custom-button>
CSS
custom-button {
display: inline-block;
margin: 10px;
}
custom-button:focus {
/* Fournir une alternative pour les navigateurs
qui ne prennent pas en charge :focus-visible */
outline: 2px solid red;
background: lightgrey;
}
custom-button:focus:not(:focus-visible) {
/* Retirer l'indicateur de focus à la souris
pour les navigateurs qui prennent en charge :focus-visible */
background: transparent;
}
custom-button:focus-visible {
/* Dessiner un contour pour les navigateurs qui
prennent en charge :focus-visible lorsque la
navigation est au clavier */
outline: 4px dashed darkorange;
background: transparent;
}
Accessibilité
Troubles de la vision
Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation WCAG 2.1 SC 1.4.11 Non-Text Contrast nécessite un contraste minimum de 3 à 1.
- Indicateurs visuels de focus accessibles : Conseils sur la conception d'indicateurs utiles et utilisables (en anglais)
Troubles cognitifs
L'apparition ou la disparition d'un indicateur de focus peut être source de confusion pour les personnes souffrant de troubles cognitifs ou pour les personnes qui ne sont pas habituées à ces interfaces.
Spécifications
Specification |
---|
Selectors Level 4 # the-focus-visible-pseudo |
Compatibilité des navigateurs
BCD tables only load in the browser