L'indicateur de focus, souvent représenté par un "anneau de focus", identifie l'élément sélectionné sur votre page. Pour les utilisateurs qui ne peuvent pas ou ne veulent pas utiliser de souris, cet indicateur est extrêmement important, car il remplace le pointeur de la souris.
Si l'indicateur de sélection par défaut du navigateur est incompatible avec votre conception, vous pouvez utiliser CSS pour le redéfinir. N'oubliez pas de penser à vos utilisateurs.
Utiliser :focus pour toujours afficher un indicateur de focus
La pseudo-classe :focus est appliquée aux éléments sélectionnés, quels que soient la méthode ou le périphérique d'entrée (souris, clavier ou stylet, par exemple) utilisés.
Par exemple, l'élément <div> suivant possède un tabindex qui le rend sélectionnable, avec un style personnalisé pour son état :focus :
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Quel que soit l'appareil que vous utilisez, l'icône <div> est la même lorsqu'elle est sélectionnée.
Malheureusement, les navigateurs peuvent appliquer la mise au point de manière incohérente. La sélection d'un élément peut dépendre du navigateur et du système d'exploitation.
Par exemple, le <button> suivant possède un CSS personnalisé pour son état :focus.
button:focus {
outline: 4px dashed orange;
}
Si vous cliquez sur <button> avec une souris dans Chrome sur macOS, vous devriez voir son style de mise au point personnalisé. Toutefois, vous ne verrez pas le style de focus personnalisé si vous cliquez sur <button> dans Safari sur macOS. En effet, dans Safari, l'élément ne reçoit pas le focus lorsque vous cliquez dessus.
Le comportement de la sélection est incohérent. Testez votre page sur différents appareils et avec différentes entrées pour vous assurer que vos styles de focus sont acceptables pour vos utilisateurs.
Utiliser :focus-visible pour afficher sélectivement un indicateur de focus
La pseudo-classe :focus-visible est appliquée lorsqu'un élément est sélectionné et que le navigateur détermine (à l'aide d'heuristiques) qu'il serait utile pour l'utilisateur d'afficher un indicateur de sélection. Plus précisément, si la dernière interaction de l'utilisateur a eu lieu avec un clavier et que la frappe n'incluait pas de touche Meta, ALT, OPTION ou CONTROL, alors :focus-visible correspondra.
Le bouton de l'exemple suivant affiche sélectivement un indicateur de sélection. Si vous cliquez avec une souris, les résultats sont différents de ceux obtenus si vous utilisez d'abord un clavier pour y accéder.
button:focus-visible {
outline: 4px dashed orange;
}
Utiliser :focus-within pour styliser le parent d'un élément sélectionné
La pseudo-classe :focus-within est appliquée à un élément lorsque l'élément lui-même est sélectionné ou lorsqu'un élément enfant est sélectionné. Il peut être utilisé pour mettre en évidence une région de la page afin d'attirer l'attention de l'utilisateur sur cette zone.
Par exemple, un formulaire reçoit le focus à 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 focus
Pour vous aider à répondre à cette question, demandez-vous : "Si vous cliquiez sur ce contrôle en utilisant un appareil mobile, vous attendriez-vous à ce qu'un clavier s'affiche ?"
- Si la réponse est oui : le contrôle doit toujours afficher un indicateur de sélection, quel que soit le périphérique d'entrée. Par exemple, c'est presque toujours le cas pour l'élément
<input type="text">. L'utilisateur doit envoyer des données à l'élément avec le clavier, quelle que soit la manière dont l'élément d'entrée est mis au point. - Si la réponse est non : le contrôle peut choisir d'afficher sélectivement un indicateur de sélection. Par exemple, lorsqu'un utilisateur clique sur un
<button>avec une souris ou sur un écran tactile, l'action est effectuée. Un indicateur de focus peut être inutile. Toutefois, si l'utilisateur navigue avec un clavier, il est utile d'afficher un indicateur de sélection afin qu'il puisse décider d'activer ou non le contrôle avec ENTRÉE ou ESPACE.
Éviter la requête outline: none
La façon dont les navigateurs décident quand dessiner un indicateur de focus est, franchement, très déroutante. Si vous modifiez l'apparence d'un élément <button> avec CSS ou si vous attribuez un tabindex à un élément, le comportement par défaut de l'anneau de sélection du navigateur se déclenche.
Parfois, les développeurs suppriment l'indicateur de sélection à l'aide de CSS :
/* Don't do this!!! */
:focus {
outline: none;
}
Pour contourner ce problème, il est préférable de combiner :focus et le polyfill :focus-visible. Le premier bloc de code montre comment fonctionne le polyfill, et l'application exemple en dessous fournit un exemple d'utilisation du polyfill pour modifier l'indicateur de sélection sur un bouton.
/*
This hides the focus indicator if the element receives focus with a
mouse, but it still shows 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 {
...
}