Concentration

Podcast CSS – 018: Focus

Sur votre page Web, vous cliquez sur un lien qui redirige l'utilisateur vers le contenu principal du site Web. Ces liens sont souvent appelés liens d'ancrage ou liens d'ancrage. Lorsque ce lien est activé par un clavier, à l'aide des touches Tab et Entrée, un anneau de sélection entoure le conteneur de contenu principal. Pourquoi ?

En effet, <main> possède une valeur d'attribut tabindex="-1", ce qui signifie qu'il peut être ciblé de manière programmatique. Lorsque la <main> est ciblée, comme l'#main-content dans la barre d'adresse du navigateur correspond à id, elle est ciblée de manière programmatique. Il est tentant de supprimer les styles de mise au point dans ces situations, mais gérer le ciblage de manière appropriée et avec soin permet de créer une expérience utilisateur de qualité et accessible. Cela peut également être un bon endroit pour ajouter un peu d’intérêt aux interactions.

Pourquoi est-ce important de se concentrer ?

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 sélection accessibles avec CSS fait partie de cette responsabilité.

Les styles de sélection aident les utilisateurs d'un appareil tel qu'un clavier ou une commande de contacteur à 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 sélectionné. Cela peut entraîner des problèmes de navigation et entraîner un comportement indésirable en cas de suivi du mauvais lien.

Comment les éléments sont sélectionnés

Certains éléments sont automatiquement sélectionnables. Il s'agit d'éléments qui acceptent les interactions et les entrées, comme <a>, <button>, <input> et <select>. En bref, tous les éléments, boutons et liens du formulaire. Vous pouvez généralement parcourir les éléments sélectionnables d'un site Web en utilisant la touche Tabulation pour avancer sur la page et 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, c'est-à-dire l'ordre dans lequel les éléments sont sélectionnés. Chaque fois qu'un utilisateur appuie sur la touche Tabulation, ou chaque fois que le curseur est déplacé avec une modification 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 être sélectionné via la touche tab et respecter l'index de tabulation global, qui est défini par l'ordre du code source du document.

Si vous définissez tabindex sur -1, la sélection n'est possible que par programmation, ce qui signifie que lorsqu'un événement JavaScript se produit ou qu'un hachage est modifié (correspondant au id de l'élément dans l'URL). Si vous définissez tabindex sur une valeur supérieure à 0, elle sera supprimée de l'index de l'onglet global, défini par l'ordre des sources du document. L'ordre de tabulation sera désormais défini par la valeur de tabindex. Par exemple, un élément avec tabindex="1" sera sélectionné avant un élément avec tabindex="2".

Style d'élément sélectionné

Par défaut, le navigateur se comporte de présenter un anneau de sélection lorsqu'un élément est sélectionné. Cet anneau de sélection varie selon le navigateur et les systèmes d'exploitation.

Ce comportement peut être modifié avec CSS, à l'aide des pseudo-classes :focus, :focus-within et :focus-visible que vous avez apprises dans la leçon sur les pseudo-classes. Il est important de définir un style de sélection qui offre un contraste au 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 y aider, car elle ajoute une padding visuelle supplémentaire sans affecter la taille géométrique remplie par l'élément. Une valeur numérique positive pour outline-offset poussera le contour vers l'extérieur, et une valeur négative le fera avancer vers l'intérieur.

Actuellement, dans certains navigateurs, si un élément border-radius est défini pour votre élément et que vous utilisez outline, il ne correspondra pas. Le contour aura des angles pointus. Il est donc tentant d'utiliser un box-shadow avec un petit rayon de flou, car box-shadow rogne la forme en respectant border-radius, mais ce style ne s'affichera pas en mode Contraste élevé de Windows. En effet, le mode Contraste élevé de Windows n'applique pas d'ombres et ignore la plupart des images de fond pour favoriser les paramètres préférés de l'utilisateur.

En résumé

La création d'un état de sélection qui contraste avec l'état par défaut d'un élément est extrêmement important. 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 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 au niveau d'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

Tester vos connaissances sur la concentration