Gérer les utilisateurs Focus avec: Focus-visible

Il s'agit du deuxième d'une série sur la conception de formulaire accessible. Si vous avez manqué le premier épisode, consultez les «formulaires accessibles avec des classes pseudo». Ce message se concentre sur le :focus-visible pseudo-classe et son utilisation efficace dans le développement Web.

Comprendre la mise au point

Avant de plonger dans :focus-visible, passons en revue le :focus pseudo-classe dans CSS. focus indique visuellement l'interaction utilisateur (clavier, souris, trackpad ou technologie d'assistance) avec un élément. Les éléments naturellement interactifs, tels que les liens, les boutons et les champs de formulaire, nécessitent des indicateurs de mise au point clairs pour maintenir la sensibilisation des utilisateurs.

Évitez ce CSS!

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

Suppression du contour par défaut :focus Supprime les commentaires visuels cruciaux pour les utilisateurs Tous . Préservez toujours les indicateurs de mise au point. Si le retrait est absolument nécessaire, assurez-vous qu'une alternative visuellement équivalente et accessible est fournie. Si des problèmes de conception surviennent, collaborez pour trouver une solution accessible.

Introduction: focus-visible

le :focus-visible pseudo-classe fournit un indicateur de mise au point similaire à :focus, mais avec une expérience utilisateur améliorée. Sa syntaxe est simple:

<code>:focus-visible {
  /* ...styles... */
}</code>

pour des éléments spécifiques:

<code>.your-element:focus-visible {
  /* ...styles... */
}</code>

focus-visible Permet des indicateurs de mise au point visuellement frappants sans encombrement visuel inutile sur les clics / robinets de la souris. S'il n'est pas implémenté, la bague de mise au point du navigateur par défaut (souvent considérée comme indésirable) demeure.

L'histoire de: focus-visible

Avant :focus-visible, les styles de navigateur par défaut appliqués :focus largement, ce qui entraîne souvent un "anneau de mise au point" peu attrayant. De nombreux développeurs ont supprimé cette bague, créant par inadvertance des problèmes d'accessibilité pour les utilisateurs de clavier.

Les navigateurs modernes utilisent une heuristique (algorithmes pour trouver de bons choix) pour déterminer quand un anneau de mise au point est bénéfique, basé sur la méthode d'entrée de l'utilisateur (clavier, souris, etc.). Cela signifie que le navigateur s'applique intelligemment ou omet l'anneau de mise au point.

Les premières implémentations reposaient sur des polyfills (comme ceux d'Alice Boxhall et Brian Kardell, et de Mozilla :moz-focusring) avant la spécification officielle. Les acteurs A11Y de Rob Dodson offrent des informations supplémentaires sur cette évolution.

Pourquoi la mise au point compte

Fournir des indicateurs de mise au point clairs est primordial pour l'accessibilité. Les utilisateurs, en particulier ceux qui ont handicapé, doivent comprendre leur emplacement et leurs interactions dans une page Web. Le site Web des deux frères Blind Brothers ( https://www.php.cn/link/A21852BF267634B8DB7F0633120E5620 ) sert d'exemple puissant de la façon dont les signaux visuels sont essentiels à la navigation.

démo et code

Le code suivant démontre :focus-visible en action. L'anneau de mise au point n'apparaît que lors de la navigation avec un clavier, démontrant l'heuristique intelligente du navigateur.

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

Prise en charge du navigateur et secours

La prise en charge du navigateur varie. Utilisez @supports (une requête de fonctionnalité) pour les styles de secours dans les navigateurs non pris en charge:

<code>:focus-visible {
  /* ...styles... */
}</code>

Considérations d'accessibilité supplémentaires

• Assurez-vous que les couleurs de l'indicateur de mise au point répondent aux directives WCAG 2.2 à contraste non de texte (niveau AA).
• Évitez la surcharge cognitive en maintenant des styles cohérents sur les éléments interactifs.

Prise en charge du navigateur (sur caniuse.com): (le tableau serait recréé ici avec des données de caniuse mise à jour)

Lire plus approfondie:

• https://www.php.cn/link/fdac69c3eee7bd0427535354eae235a4
• https://www.php.cn/link/54bca824f5fa890e036fb9191bcdc324

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!