Comment activer : se concentrer uniquement sur l'utilisation du clavier (ou sur la pression de tabulation) ?

Activer :focus uniquement sur l'utilisation du clavier (ou sur la pression de la tabulation)

Aperçu

La désactivation de :focus lorsqu'il n'est pas nécessaire peut améliorer l'expérience utilisateur en éliminant indices visuels déroutants. Cependant, il est essentiel de maintenir la fonctionnalité de focus pour les utilisateurs de clavier.

Solution originale : styles de focus pour le clavier uniquement

La solution de Roman Komarov utilise CSS et HTML pour obtenir des styles de focus pour le clavier uniquement. Il encapsule les éléments focalisables dans un élément conteneur et stylise uniquement l'élément interne, laissant l'état de focus visuellement accessible aux utilisateurs du clavier.

Solution améliorée : : pseudo-classe focus-visible

Mise à jour : La pseudo-classe :focus-visible offre un moyen plus élégant et plus efficace d'obtenir des styles de focus uniquement sur le clavier. Les navigateurs indiquent désormais le focus uniquement lorsque cela améliore l'expérience utilisateur, par exemple lors d'une interaction avec le clavier.

Pour utiliser :focus-visible, remplacez :focus par :focus-visible dans vos règles CSS. Cela garantit que les styles de mise au point ne sont visibles que lorsqu'ils sont activés par le clavier ou des appareils sans pointage.

Compatibilité ascendante

Les navigateurs qui ne prennent pas en charge :focus-visible afficheront la bague de mise au point par défaut. Pour offrir une expérience utilisateur cohérente, Šime Vidas suggère de définir des styles de focus dans :focus et de les inverser dans :focus:not(:focus-visible).

Exemple CSS :

<code class="css">button:focus {
  outline: none;
  background: #ffdd00;
}

button:focus:not(:focus-visible) {
  background: white;
}</code>

Exemple HTML :

<code class="html"><button class="btn">
  <span class="btn__content" tabindex="-1">...</span>
</button></code>

Remarques :

• Utilisez l'attribut tabindex pour rendre les éléments non focalisables focalisables.
• Assurez-vous que votre CSS est suffisamment spécifique pour remplacer les styles de focus par défaut .
• Envisagez d'utiliser :focus-within pour styliser l'élément parent lorsque son enfant est focus.

Conclusion

En tirant parti de la pseudo-classe :focus-visible ou En mettant en œuvre la solution originale, les développeurs peuvent fournir des styles de focus uniquement sur le clavier sans compromettre l'expérience utilisateur pour les utilisateurs de clavier et de souris.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!