L'indicateur de mise au point (souvent représenté par un "anneau de mise au point") identifie la sélectionné sur votre page. Pour les utilisateurs qui ne peuvent pas utiliser la souris, est extrêmement important, car il remplace leur le pointeur de la souris.
Si l'indicateur de mise au point par défaut du navigateur est incompatible avec votre conception, vous pouvez utiliser CSS pour modifier son style. N'oubliez pas de penser aux utilisateurs de votre clavier !
Utilisez :focus pour toujours afficher un indicateur de mise au point
:focus
La pseudo-classe est appliquée chaque fois qu'un élément est sélectionné, quelle que soit l'entrée
appareil (souris, clavier, stylet, etc.) ou méthode utilisée pour effectuer la mise au point. Par exemple :
l'élément <div> ci-dessous comporte un élément tabindex qui le rend sélectionnable. Il est également doté
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,
le <div> aura toujours la même apparence.
Malheureusement, les navigateurs peuvent être incohérents avec la façon dont ils appliquent le ciblage. Indique si la fonction ou et non un élément sélectionné peut dépendre du navigateur et du système d'exploitation du système d'exploitation.
Par exemple, le <button> ci-dessous a également un style personnalisé pour son :focus
de l'état.
button:focus {
outline: 4px dashed orange;
}
Si vous cliquez sur <button> avec la souris dans Chrome sous macOS, vous devriez voir
son style de focus personnalisé. Toutefois, vous ne verrez pas le style de focus personnalisé
Cliquez sur <button> dans Safari sous macOS. C'est parce que, dans
Dans Safari, l'élément n'est pas sélectionné lorsque vous cliquez dessus.
La focalisation étant incohérente, quelques tests peuvent être nécessaires sur différents appareils pour vous assurer que vos styles de mise au point sont acceptables pour vos utilisateurs.
Utiliser :focus-visible pour afficher de manière sélective un indicateur de mise au point
Les nouvelles
:focus-visible
est appliquée chaque fois qu'un élément est sélectionné et que
le navigateur détermine à l'aide d'une heuristique que l'affichage d'un indicateur de mise au point
bénéfique pour l'utilisateur. En particulier, si l'interaction la plus récente de l'utilisateur
s'est déroulée à l'aide du clavier et que l'appui sur les touches n'inclut pas de méta, ALT / OPTION,
ou CONTROL, alors :focus-visible correspondra.
Le bouton de l'exemple ci-dessous affiche de façon sélective un indicateur de mise au point. Si si vous cliquez dessus à l'aide de la souris, les résultats ne sont pas les mêmes à 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
:focus-within
est appliquée à un élément lorsque celui-ci reçoit lui-même
ou lorsqu'un autre élément à l'intérieur
de cet élément est sélectionné.
Il peut être utilisé pour mettre en évidence une zone de la page afin de dessiner l'attention de l'utilisateur sur cette zone. Par exemple, le formulaire ci-dessous est sélectionné lorsque le formulaire lui-même est sélectionné et lorsque l'une de ses cases d'option sélectionnée.
form:focus-within {
background: #ffecb3;
}
Quand afficher un indicateur de mise au point
Une bonne règle de base est de vous poser la question suivante : « Si vous avez cliqué sur cette commande pendant à l'aide d'un appareil mobile, pensez-vous qu'il affiche un clavier ? »
Si la réponse est « oui », le contrôle devrait probablement toujours mettre l'accent
quel que soit le périphérique d'entrée utilisé pour effectuer la mise au point. Un bon exemple est
l'élément <input type="text">. L'utilisateur doit envoyer l'entrée au
via le clavier, quelle que soit la manière dont l'élément de saisie a été initialement reçu
Il est donc utile d'afficher en permanence un indicateur de mise au point.
Si la réponse
est « non », la commande peut choisir d'afficher
indicateur. 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 l'indicateur de mise au point risque de ne pas
si nécessaire. Toutefois, si l'utilisateur navigue avec un clavier, il est utile
d'afficher un indicateur de focus
pour que l'utilisateur puisse décider s'il veut ou non
cliquez sur la commande à l'aide des touches ENTER ou SPACE.
Éviter la requête outline: none
Les navigateurs décident quand dessiner
un indicateur de mise au point
déroutants. Modifier l'apparence d'un élément <button> avec du code CSS ou en donnant
un élément tabindex entraîne le comportement par défaut de l'anneau de focus du navigateur
le coup d’envoi.
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;
}
Une meilleure façon de contourner ce problème consiste à utiliser une combinaison de :focus et
le polyfill :focus-visible. Le premier bloc de code ci-dessous montre comment
le polyfill fonctionne, et l'application exemple située en dessous fournit un exemple d'utilisation
le polyfill pour modifier l'indicateur de focus 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 {
…
}