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
parbox-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
Parmi les éléments suivants, lesquels sont automatiquement sélectionnables ?
<a>
<p>
<button>
<input>
<output>
<select>
Parmi les périphériques d'entrée suivants, lesquels peuvent effectuer la mise au point ?