Pseudo-classe CSS :focus-visible

Exemple interactif

label {
  display: block;
  margin-top: 1em;
}

input:focus-visible {
  outline: 2px solid crimson;
  border-radius: 3px;
}

select:focus-visible {
  border: 2px dashed crimson;
  border-radius: 3px;
  outline: none;
}

<form>
  <p>Quelle saveur souhaitez-vous commander&nbsp;?</p>
  <label>Nom complet : <input name="firstName" type="text" /></label>
  <label
    >Saveur&nbsp;:
    <select name="flavor">
      <option>Cerise</option>
      <option>Thé vert</option>
      <option>Vanille et beurre salé</option>
      <option>Pépites de menthe</option>
    </select>
  </label>
</form>

Ce sélecteur peut être utile afin de fournir un indicateur de sélection différent selon le mode de navigation de l'utilisateur·ice (souris ou clavier).

Syntaxe

:focus-visible {
  /* ... */
}

:focus et :focus-visible

Originalement, l'agent utilisateur CSS appliquait les styles de sélection uniquement sur la pseudo-classe :focus, stylisant la plupart des éléments en sélection avec un contour de sélection. Cela signifie que tous les éléments, y compris tous les liens et boutons, avaient un contour de sélection appliqué lorsqu'ils sont sélectionnés, ce que beaucoup trouvaient peu esthétique. En raison de cette apparence, certains auteur·ice·s ont supprimé les styles de contour de sélection de l'agent utilisateur. Changer le style de sélection peut diminuer l'utilisabilité, tandis que supprimer les styles de sélection rend la navigation au clavier inaccessible pour les utilisateur·ice·s voyant·e·s.

Les navigateurs n'indiquent plus visiblement la sélection (comme en traçant un « contour de sélection ») autour de chaque élément lorsqu'il a la sélection. Au lieu de cela, ils utilisent une variété d'heuristiques pour fournir des indicateurs de la sélection uniquement lorsque c'est le plus utile pour l'utilisateur·ice. Par exemple, lorsqu'un bouton est cliqué à l'aide d'un dispositif de pointage, la sélection n'est généralement pas indiqué visuellement, mais lorsqu'une zone de texte nécessitant une saisie utilisateur·ice a la sélection, la sélection est indiqué. Bien que les styles de la sélection soient toujours requis lorsque les utilisateur·ice·s naviguent sur la page avec le clavier ou lorsque la sélection est géré par des scripts, les styles de la sélection ne sont pas requis lorsque l'utilisateur·ice sait où il met la sélection, par exemple lorsqu'il utilise un dispositif de pointage tel qu'une souris ou un doigt pour définir physiquement la sélection sur un élément, à moins que cet élément continue d'avoir besoin de l'attention de l'utilisateur·ice.

La pseudo-classe :focus correspond toujours à l'élément actuellement sélectionné. La pseudo-classe :focus-visible correspond également à l'élément sélectionné, mais uniquement si l'utilisateur·ice doit être informé de l'emplacement actuel de la sélection. Parce que la pseudo-classe :focus-visible correspond à l'élément sélectionné lorsque cela est nécessaire, l'utilisation de :focus-visible (au lieu de la pseudo-classe :focus) permet aux auteur·ice·s de modifier l'apparence de l'indicateur de la sélection sans changer le moment où l'indicateur de la sélection apparaît.

Lorsque la pseudo-classe :focus est utilisée, elle cible toujours l'élément actuellement sélectionné. Cela signifie que lorsque l'utilisateur·ice utilise un dispositif de pointage, un contour de la sélection visible apparaît autour de l'élément sélectionné, ce que certains considèrent comme intrusif. La pseudo-classe :focus-visible respecte le comportement d'indication de la sélection sélectif des agents utilisateurs tout en permettant la personnalisation de l'indicateur de la sélection.

Accessibilité

Troubles de la vision

Il faut s'assurer que l'indicateur visuel de la sélection puisse être vu par des personnes ayant une vision faible. Cela peut 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 pour le contraste non textuel ^(angl.) nécessite un contraste minimum de 3 à 1.

• Indicateurs visuels de la sélection accessibles : Conseils sur la conception d'indicateurs utiles et utilisables ^(angl.)

Troubles cognitifs

L'apparition ou la disparition d'un indicateur de sélection peut être source de confusion pour les personnes souffrant de troubles cognitifs ou pour les personnes qui ne sont pas habituées à ces interfaces.

Exemples

Comparaison de :focus et :focus-visible

Cet exemple présente trois paires de contrôles. Chaque paire se compose d'un champ de saisie de type text et d'un bouton.

• La première paire n'ajoute aucun style personnalisé pour les états de sélection et affiche le cas par défaut.
• La deuxième paire ajoute des styles à l'aide de la pseudo-classe :focus.
• La troisième paire ajoute des styles à l'aide de la pseudo-classe :focus-visible.

HTML

<input type="text" value="Styles par défaut" /><br />
<button>Styles par défaut</button><br />

<input class="focus-only" type="text" value=":focus" /><br />
<button class="focus-only">seulement :focus</button><br />

<input class="focus-visible-only" type="text" value=":focus-visible" />
<br />
<button class="focus-visible-only">seulement :focus-visible</button>

CSS

input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

Si vous cliquez sur chaque élément tour à tour, vous voyez que lorsque :focus est utilisé pour mettre en forme l'anneau de sélection, l'agent utilisateur dessine l'anneau de sélection lorsque l'utilisateur·ice clique sur le bouton. Cependant, lorsque :focus-visible est utilisé pour mettre en forme l'anneau de sélection, l'agent utilisateur ne dessine pas l'anneau de sélection lorsque l'utilisateur·ice clique sur le bouton, comme dans le cas par défaut.

Si vous parcourez ensuite chaque élément à l'aide de la touche Tab, vous constatez que dans les trois cas — par défaut, :focus et :focus-visible — l'agent utilisateur dessine l'anneau de sélection autour du bouton lorsque l'utilisateur·ice y accède à l'aide du clavier.

Cela montre comment :focus-visible permet à un·e concepteur·rice de suivre la logique du navigateur pour déterminer quand un anneau de sélection doit être affiché.

Fournir un :focus de repli

Si votre code doit fonctionner dans d'anciennes versions de navigateurs qui ne prennent pas en charge :focus-visible, vérifiez la prise en charge de :focus-visible avec @supports et répétez le même style de mise en évidence, mais à l'intérieur d'une règle :focus. Notez que même si vous ne définissez rien du tout pour :focus, les anciens navigateurs affichent simplement le contour natif, ce qui peut être suffisant.

<button class="button with-fallback" type="button">
  Bouton avec solution de repli
</button>
<button class="button without-fallback" type="button">
  Bouton sans solution de repli
</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Dessine la sélection lorsque :focus-visible est pris en charge */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Solution de repli pour les navigateurs ne prenant pas en charge :focus-visible */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• La pseudo-classe :focus
• La pseudo-classe :focus-within