Comprendre la différence entre `:focus` et `:focus-visible` en CSS

Comprendre la différence entre :focus et :focus-visible en CSS

J'ai beaucoup appris sur l'importance de l'accessibilité du clavier, je sais donc que l'indication visuelle de l'élément ciblé est très importante. Mais la pseudo-classe bien connue :focus n’est pas toujours la meilleure solution pour ce travail. C'est là qu'intervient :focus-visible. Examinons les différences entre ces deux pseudo-classes et explorons les meilleures pratiques pour les utiliser efficacement.

Qu'est-ce que la pseudo-classe :focus ?

La pseudo-classe :focus est un sélecteur CSS qui applique des styles à tout élément qui reçoit le focus, quelle que soit la manière dont ce focus a été déclenché. Cela inclut les événements de focus liés à la navigation au clavier, aux clics de souris et aux interactions tactiles.

Exemple d'utilisation de :focus

button:focus {
  outline: 2px solid blue;
}

Dans cet exemple, le bouton affichera un contour bleu chaque fois qu'il est mis au point, que l'utilisateur clique dessus avec une souris, l'appuie sur un écran tactile ou y accède à l'aide du clavier.

Qu'est-ce que la pseudo-classe :focus-visible ?

La pseudo-classe :focus-visible est plus spécialisée. Il n'applique des styles à un élément que lorsque le navigateur détermine que le focus doit être visible. Cela se produit généralement lorsque l'utilisateur navigue via le clavier ou des technologies d'assistance plutôt que via la souris ou la saisie tactile.

Exemple d'utilisation de :focus-visible

button:focus-visible {
  outline: 2px solid blue;
}

Ici, le bouton n'affichera qu'un contour bleu lorsqu'il sera mis au point via la navigation au clavier ou une autre méthode de saisie qui nécessite généralement des indicateurs de mise au point visibles.

Principales différences entre :focus et :focus-visible

:se concentrer

• Comportement : S'applique à tout élément qui reçoit le focus, quelle que soit la méthode de saisie.
• Cas d'utilisation : Garantit que toutes les interactions avec l'élément sont visuellement indiquées, que ce soit par la souris, le clavier ou le toucher.

:focus-visible

• Comportement : applique les styles uniquement lorsque le focus doit être visible, par exemple lors de l'utilisation d'un clavier ou d'une technologie d'assistance.
• Cas d'utilisation : Idéal pour les scénarios dans lesquels vous souhaitez fournir des indicateurs de concentration uniquement aux utilisateurs de clavier et de technologies d'assistance tout en évitant les contours inutiles pour les utilisateurs de souris et de touches tactiles, généralement requis par la conception.

Implications en matière d'accessibilité

:se concentrer

• Avantages :
• Garantit que tous les utilisateurs peuvent voir quand un élément est ciblé, ce qui est essentiel pour l'accessibilité.
• Inconvénients :
• Peut conduire à une expérience sous-optimale pour les utilisateurs de souris, car les styles de focus peuvent apparaître inutilement lors des interactions avec la souris.

:focus-visible

• Avantages :
• Améliore l'expérience utilisateur en affichant les indicateurs de mise au point uniquement lorsque cela est nécessaire, gardant ainsi l'interface propre pour les utilisateurs de souris et de touches tactiles.
• Adapte l'expérience aux utilisateurs de clavier et de technologies d'assistance, en leur fournissant des repères visuels clairs.
• Inconvénients :
• Des considérations supplémentaires peuvent être nécessaires pour garantir que les indicateurs de focus ne sont pas accidentellement omis, en particulier dans les navigateurs plus anciens qui ne prennent pas en charge :focus-visible.
  • Il peut y avoir des cas où vous souhaitez afficher des indicateurs de focus pour tous les utilisateurs, quelle que soit la méthode de saisie.

Meilleures pratiques d'utilisation de :focus et :focus-visible

Pour obtenir la meilleure accessibilité et expérience utilisateur, combiner à la fois :focus et :focus-visible dans votre CSS est souvent une bonne idée.

Combinaison de :focus et :focus-visible

button:focus {
  outline: 2px solid blue;
}

Voici un exemple Stackblitz de ce à quoi un tel style pourrait ressembler pour que vous puissiez l'essayer et jouer avec :

Conseils supplémentaires

• Test avec le clavier et la technologie d'assistance : Assurez-vous que votre application Web est navigable à l'aide d'un clavier (Tab, Shift Tab, etc.) et que les indicateurs de focus sont visibles pour ceux qui s'en servent. Ce n'est jamais une mauvaise idée d'inclure des tests d'accessibilité dans votre suite de tests e2e.
• Fournissez des indicateurs de concentration clairs : Assurez-vous que les indicateurs de concentration sont bien visibles et faciles à voir. Un indicateur de mise au point subtil ou difficile à repérer peut avoir de graves conséquences sur l'accessibilité pour les utilisateurs qui comptent sur la navigation au clavier.

Conclusion

La pseudo-classe :focus-visible offre une manière plus raffinée de gérer les indicateurs de focus, améliorant ainsi l'accessibilité et l'expérience utilisateur, en particulier pour les utilisateurs de clavier et de technologies d'assistance. En comprenant les différences entre :focus et :focus-visible et en appliquant les meilleures pratiques dans votre CSS, vous pouvez créer des applications Web plus accessibles et conviviales.

N'oubliez pas que l'accessibilité ne doit jamais être une réflexion après coup. En appliquant judicieusement les styles de focus, vous garantissez que tous les utilisateurs, quelle que soit la manière dont ils interagissent avec votre site, peuvent facilement naviguer et interagir.

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!