Nouveau Components

Focus

Le focus est un contour ou une bordure visible qui montre quel élément d’une page web est actuellement sélectionné ou en cours d’interaction par l’utilisateur. Il aide les utilisateurs qui naviguent au clavier ou utilisent des technologies d’assistance à savoir où ils se trouvent sur la page. Cela facilite l’interaction avec les composants interactifs d’une page web tels que les boutons, les liens ou les champs de formulaire.

Quand utiliser le focus

  • Utilisez une bordure de focus sur les éléments qui peuvent recevoir le focus, tels que les liens, les boutons, les champs de formulaire et tout autres composants interactifs.
  • L'activation d'un élément à l'aide d'un périphérique de pointage, comme une souris, inclut des actions telles que cliquer sur des boutons, sélectionner des éléments dans un menu ou faire glisser et déposer des objets.

Quand ne pas utiliser le focus

  • Ne pas appliquer de bordure de focus sur des éléments non interactifs ou non focalisables tels que le texte, les tableaux, etc.

Sur cette page

Comportements

Assurez-vous que les éléments au focus soient faciles à identifier lors de l'utilisation de la touche Tab en fournissant un indicateur visuel clair, tel qu'une bordure ou un contour, avec un ratio de contraste minimum de 3:1 par rapport au contenu environnant et d'une épaisseur de 2 pixels minimum.

Interaction avec la souris

Lors de la navigation au clavier, les éléments au focus doivent changer visuellement (par exemple, afficher une bordure de focus ou changer de couleur de fond) pour indiquer clairement qu'ils sont actifs ou sélectionnés.

Stylisation du focus

  1. Indication concise : Gardez les indicateurs de focus simples et clairs, en évitant un style excessif qui pourrait distraire les utilisateurs.
  2. Différenciation claire : Utilisez des indicateurs visuels distincts (tels que des bordures ou des contours) pour différencier les éléments au focus des autres.
  3. Éviter la disparition : Assurez-vous que les indicateurs de focus restent visibles et ne sont pas cachés ou obscurcis par des éléments superposés.
  4. Si le composant a une couleur de fond, utilisez le CSS pour décaler la bordure de focus, par exemple avec outline-offset, afin de garantir qu'elle soit clairement visible. Cela créera une bordure de focus bien séparée autour du bouton, même si la couleur de fond est présente.

Sur cette page