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 mis au point de manière programmatique. Lorsque l'<main> est ciblé (car le #main-content dans la barre d'URL du navigateur correspond à id), il reçoit une attention programmatique. Il est tentant de supprimer les styles de focus dans ces situations, mais gérer le focus de manière appropriée et avec soin permet de créer une bonne expérience utilisateur accessible. C'est aussi un excellent moyen d'ajouter de l'intérêt aux interactions.

Pourquoi la concentration est-elle importante ?

En tant que développeur Web, votre rôle est de rendre un site Web accessible et inclusif pour tous. La création d'états de ciblage accessibles avec CSS fait partie de cette responsabilité.

Les styles de focus aident les utilisateurs d'un appareil tel qu'un clavier ou un boutons de commande à naviguer et à interagir avec un site Web. Si un élément reçoit la sélection et qu'aucune indication visuelle n'est fournie, l'utilisateur peut perdre de vue l'élément sélectionné. Cela peut entraîner des problèmes de navigation et un comportement indésirable si, par exemple, le mauvais lien est suivi.

Comment les éléments sont-ils sélectionné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. En règle générale, vous pouvez naviguer dans les éléments sélectionnables d'un site Web à l'aide de la touche Tabulation pour avancer sur la page et de 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 à l'ordre dans lequel les éléments sont mis en surbrillance) chaque fois qu'un utilisateur appuie sur la touche Tabulation, ou que le focus est déplacé avec un changement de hachage dans l'URL ou par un événement JavaScript. Si tabindex d'un élément HTML est défini sur 0, il peut recevoir la sélection via la touche Tabulation et respecter l'index de tabulation global, qui est défini par l'ordre de la source du document.

Si vous définissez tabindex sur -1, il ne peut être sélectionné que par programmation, c'est-à-dire uniquement lorsqu'un événement JavaScript se produit ou qu'une modification du 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 des onglets global, défini par l'ordre de la source du document. L'ordre de tabulation sera désormais 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.

Style

Par défaut, le navigateur présente un anneau de focus lorsqu'un élément est sélectionné. Cet anneau de sélection varie selon le navigateur et le système d'exploitation.

Ce comportement peut être modifié avec CSS, à l'aide des pseudo-classes :focus, :focus-within et :focus-visible que vous avez étudiées dans la le leçon sur les pseudo-classes. Il est important de définir un style de focus qui 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 apparaître trop près du texte d'un lien, mais la propriété outline-offset peut vous aider, car elle ajoute des padding visuels supplémentaires 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, tandis qu'une valeur négative le tire vers l'intérieur.

Actuellement, dans certains navigateurs, si vous définissez un border-radius sur votre élément et que vous utilisez outline, il ne correspondra pas. Le contour aura des angles vifs. C'est pourquoi il est tentant d'utiliser un box-shadow avec un petit rayon de flou, car box-shadow se coupe à la forme, en respectant border-radius. Toutefois, ce style ne s'affiche pas en 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 privilégier 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 le font déjà pour vous, mais si vous souhaitez modifier ce comportement, tenez compte des points suivants :

• Évitez d'utiliser outline: none sur un élément pouvant recevoir la sélection 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 sur un élément HTML que si vous y êtes absolument obligé.
• Assurez-vous que l'état de sélection est très clair par rapport à l'état par défaut.

Vérifier vos connaissances

Testez vos connaissances sur la mise au point