Maison >interface Web >tutoriel CSS >Comment activer : se concentrer uniquement sur l'utilisation du clavier (ou sur la pression de tabulation) ?
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.
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.
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.
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).
<code class="css">button:focus { outline: none; background: #ffdd00; } button:focus:not(:focus-visible) { background: white; }</code>
<code class="html"><button class="btn"> <span class="btn__content" tabindex="-1">...</span> </button></code>
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!