Faciliter la navigation au clavier avec :focus, outline et box-shadow
Beaucoup de sites utilisent les mêmes styles au survol avec une souris (via :hover
) que lors de la navigation au clavier (via :focus
).
Or cela n’a pas le même impact et ne répond pas au même besoin :
- En naviguant avec une souris, l’utilisateur sait où est son pointeur et cherche à confirmer qu’un élément est réactif grâce aux styles du
:hover
- En naviguant au clavier l’utilisateur cherche plutôt à aller au prochain élément réactif sans forcément savoir où celui-ci se trouve.
Il faut donc rendre le :focus
facile à localiser pour l’utilisateur.