Cibler

Podcast CSS – 018: Focus

Sur votre page Web, vous cliquez sur un lien qui redirige l'utilisateur vers le contenu principal du site web. On les appelle souvent liens d'ancrage ou liens d'ancrage. Lorsque ce lien est activé par un clavier, à l'aide des touches Tabulation et Entrée, le conteneur de contenu principal est entouré d'un anneau de focus. Pourquoi ?

En effet, <main> a une valeur d'attribut tabindex="-1", ce qui signifie qu'il peut être ciblé de manière programmatique. Lorsque le <main> est ciblé, car #main-content dans la barre d'adresse du navigateur correspond à id. Il est sélectionné de façon programmatique. Il est tentant de supprimer les styles de focus dans ces situations, Mais gérer l'attention de manière appropriée et prudente contribue à créer une bonne, de l'expérience utilisateur. C'est également un excellent moyen d'ajouter un peu d'intérêt à vos interactions.

Pourquoi la concentration est-elle importante ?

En tant que développeur Web, il est de votre devoir de rendre un site web accessible et inclusif à tous. La création d'états de focus accessibles avec CSS fait partie de cette responsabilité.

Les styles de mise au point aident les personnes qui utilisent un appareil comme un clavier ou un contrôle des commutateurs pour naviguer et interagir avec un site Web. Si un élément est sélectionné et qu'il n'y a pas d'indication visuelle, un utilisateur peut perdre la trace de ce qui est dans le champ. Cela peut créer des problèmes de navigation et entraîner un comportement indésirable si, si vous suivez le mauvais lien.

Comment les éléments sont-ils ciblés ?

Certains éléments sont automatiquement sélectionnables. il s'agit d'éléments qui acceptent les interactions et les entrées, tels que <a>, <button>, <input> et <select>. En bref, tous les éléments, boutons et liens du formulaire. Vous pouvez généralement naviguer parmi les éléments sélectionnables d'un site Web à l'aide de la touche Tabulation pour avancer sur la page et de la touche Maj+Tabulation pour revenir en arrière.

Il existe également un attribut HTML appelé tabindex qui vous permet de modifier l'index de tabulation, qui correspond au ordre de sélection des éléments : chaque fois que quelqu'un appuie sur la touche de tabulation, ou le focus est décalé avec un changement de hachage dans l'URL ou par un événement JavaScript. Si tabindex sur un élément HTML est défini sur 0, il peut être sélectionné via la touche Tabulation et respectera l'index global de l'onglet, défini par l'ordre des sources du document.

Si vous définissez tabindex sur -1, il ne peut être sélectionné que par programmation, ce qui signifie que lorsqu'un événement JavaScript se produit ou un changement de hachage (correspondant au id de l'élément dans l'URL) se produit. Si vous définissez tabindex sur une valeur supérieure à 0, il sera supprimé de l'index de l'onglet global, par ordre de source des documents. L'ordre de tabulation sera maintenant défini par la valeur de tabindex, Ainsi, un élément avec tabindex="1" sera sélectionné avant un élément avec tabindex="2", par exemple.

Priorité au style

Le comportement par défaut du navigateur lorsqu'un élément est sélectionné consiste à présenter un anneau de focus. Cet anneau de focus varie selon le navigateur et les systèmes d'exploitation.

Ce comportement peut être modifié avec CSS, à l'aide de :focus, :focus-within et :focus-visible ou pseudo-classes que vous avez étudiées leçon sur les pseudo-classes. Il est important de définir un style de focus à contraste avec le style par défaut d'un élément. Par exemple, une approche courante consiste à utiliser la propriété outline.

a:focus {
  outline: 2px solid slateblue;
}

La propriété outline peut s'afficher trop près du texte d'un lien, mais la propriété outline-offset peut vous aider, car elle ajoute une padding visuelle supplémentaire sans affecter la taille géométrique que l'élément remplit. Une valeur numérique positive pour outline-offset repousse le contour vers l'extérieur, une valeur négative attirera le contour vers l'intérieur.

Actuellement, dans certains navigateurs, Si vous avez défini une border-radius sur votre élément et que vous utilisez outline, il ne correspondra pas - le contour aura des coins nets. C'est pourquoi il peut être tentant d'utiliser un box-shadow avec un petit rayon de flou, car box-shadow s'adapte à la forme, en l'honneur de border-radius, mais ce style n'apparaîtra pas dans le mode Contraste élevé de Windows. En effet, le mode Contraste élevé de Windows n'applique pas les ombres, et ignore principalement les images de fond pour favoriser les paramètres préférés de l'utilisateur.

En résumé

Il est extrêmement important de créer un état de focus qui contraste avec l'état par défaut d'un élément. Les styles de navigateur par défaut permettent déjà cette opération pour vous. Toutefois, si vous souhaitez modifier ce comportement, tenez compte des points suivants:

• Évitez d'utiliser outline: none sur un élément qui peut être sélectionné au clavier.
• Évitez de remplacer les styles outline par box-shadow. car ils n'apparaissent pas en mode Contraste élevé de Windows.
• Ne définissez une valeur positive pour tabindex dans un élément HTML que si c'est absolument nécessaire.
• Assurez-vous que l'état de sélection est très clair par rapport à l'état par défaut.

Testez vos connaissances

Testez vos connaissances sur la mise au point