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

La syntaxe n'a pas été trouvée !

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: none;
  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é

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.

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':focus-visible' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 67
Désactivée
Support complet 67
Désactivée
Désactivée From version 67: this feature is behind the #enable-experimental-web-platform-features runtime flag (needs to be set to enabled).
Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Support complet 67
Désactivée
Support complet 67
Désactivée
Désactivée From version 67: this feature is behind the #enable-experimental-web-platform-features runtime flag (needs to be set to enabled).
Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,