L'indicateur de mise au point (souvent représentée par un "anneau de mise au point") identifie l'élément actuellement sélectionné sur votre page. Pour les utilisateurs qui ne peuvent pas se servir de la souris, cet indicateur est extrêmement important, car il sert de repère pour le pointeur de la souris.
Si l'indicateur de focus par défaut du navigateur entre en conflit avec votre conception, vous pouvez utiliser du code CSS pour le modifier. N'oubliez pas de garder à l'esprit les utilisateurs de votre clavier !
Utiliser :focus pour toujours afficher un indicateur de mise au point
La pseudo-classe :focus est appliquée chaque fois qu'un élément est sélectionné, quel que soit le périphérique d'entrée (souris, clavier, stylet, etc.) ou la méthode utilisée pour le sélectionner. Par exemple, l'élément <div> ci-dessous comporte un élément tabindex qui le rend sélectionnable. Il dispose également d'un style personnalisé pour son état :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Que vous utilisiez une souris pour cliquer dessus ou un clavier pour y accéder, <div> aura toujours la même apparence.
Malheureusement, les navigateurs ne sont pas toujours au même niveau que la mise au point. Le fait qu'un élément soit sélectionné ou non peut dépendre du navigateur et du système d'exploitation.
Par exemple, l'élément <button> ci-dessous a également un style personnalisé pour son état :focus.
button:focus {
outline: 4px dashed orange;
}
Si vous cliquez sur <button> avec la souris dans Chrome sous macOS, vous devriez voir son style de ciblage personnalisé. Toutefois, vous ne verrez pas le style de ciblage personnalisé si vous cliquez sur <button> dans Safari sous macOS. En effet, dans Safari, l'élément n'est pas sélectionné lorsque vous cliquez dessus.
Comme le comportement de mise au point est incohérent, un peu de test peut être nécessaire sur différents appareils pour vous assurer que vos styles de mise au point sont acceptables pour vos utilisateurs.
Utiliser :focus-visible pour afficher un indicateur de mise au point de manière sélective
La nouvelle pseudo-classe :focus-visible est appliquée chaque fois qu'un élément est sélectionné, et le navigateur détermine, à l'aide d'heuristiques, que l'affichage d'un indicateur de focus serait bénéfique pour l'utilisateur. En particulier, si l'interaction utilisateur la plus récente a été effectuée via le clavier et que l'appui sur une touche n'incluait pas de touche méta, ALT / OPTION ou CONTROL, :focus-visible correspondra.
Le bouton de l'exemple ci-dessous permet d'afficher de manière sélective un indicateur de mise au point. Si vous cliquez dessus à l'aide de la souris, les résultats ne s'affichent pas de la même façon que si vous utilisez d'abord un clavier pour y accéder à l'aide de la touche de tabulation.
button:focus-visible {
outline: 4px dashed orange;
}
Utiliser :focus-within pour appliquer un style au parent d'un élément sélectionné
La pseudo-classe :focus-within est appliquée à un élément soit lorsque l'élément lui-même est sélectionné, soit lorsqu'un autre élément à l'intérieur de cet élément le reçoit.
Elle peut être utilisée pour mettre en évidence une zone de la page afin d'attirer l'attention de l'utilisateur sur cette zone. Par exemple, le formulaire ci-dessous est sélectionné à la fois lorsque le formulaire lui-même est sélectionné et lorsque l'une de ses cases d'option est sélectionnée.
form:focus-within {
background: #ffecb3;
}
Quand afficher un indicateur de mise au point
En règle générale, posez-vous la question suivante : "Si vous avez cliqué sur cette commande en utilisant un appareil mobile, vous attendez-vous à ce qu'il affiche un clavier ?".
Si la réponse est "oui", la commande devrait probablement afficher toujours un indicateur de sélection, quel que soit le périphérique d'entrée utilisé. L'élément <input type="text"> en est un bon exemple. L'utilisateur doit envoyer une entrée à l'élément via le clavier, quelle que soit la façon dont l'élément d'entrée a initialement reçu la sélection. Il est donc utile de toujours afficher un indicateur de sélection.
Si la réponse est "non", la commande peut choisir d'afficher de manière sélective un indicateur de sélection. L'élément <button> en est un bon exemple. Si un utilisateur clique dessus avec une souris ou un écran tactile, l'action est terminée et un indicateur de mise au point n'est peut-être pas nécessaire. Toutefois, si l'utilisateur navigue avec un clavier, il est utile d'afficher un indicateur de focus afin qu'il puisse décider s'il souhaite cliquer ou non sur la commande à l'aide des touches ENTER ou SPACE.
Éviter la requête outline: none
La façon dont les navigateurs décident quand dessiner un indicateur de sélection est très déroutante. Si vous modifiez l'apparence d'un élément <button> avec CSS ou si vous attribuez une tabindex à un élément, le comportement de l'anneau de sélection par défaut du navigateur sera déclenché.
Un anti-modèle très courant consiste à supprimer l'indicateur de focus à l'aide de CSS, par exemple:
/* Don't do this!!! */
:focus {
outline: none;
}
Un meilleur moyen de contourner ce problème consiste à utiliser une combinaison de :focus et du polyfill :focus-visible. Le premier bloc de code ci-dessous montre comment fonctionne le polyfill. L'application exemple en dessous fournit un exemple d'utilisation du polyfill pour modifier l'indicateur de mise au point sur un bouton.
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
…
}