Licence CC BY-NC-ND

Faciliter la navigation au clavier avec :focus, outline et box-shadow

Quelques astuces pour des styles adaptés à la navigation au clavier et à la souris

Beaucoup de sites utilisent les mêmes styles au survol avec une souris (via :hover) que lors de la navigation au clavier (via :focus)1.

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.

Bien que les navigateurs fournissent des styles par défaut, ceux-ci ne sont pas toujours très adaptés (bordure très fine, parfois sans contraste, au style parfois pas très cohérent, etc.). À vous, donc, de fournir une solution adaptée tout en vous assurant que le rendu soit cohérent avec votre charte graphique.

Certaines personnes ont l’habitude de supprimer les styles par défaut des navigateurs via outline: none sans fournir de solution alternative. Ceci rend la navigation au clavier impossible (et par conséquent votre site moins accessible). Ne faites jamais ça !

Je vais donc vous partager quelques astuces pour mettre en place des liens et des boutons facilement utilisables au clavier sans casser votre superbe design. :)


  1. Je vous rassure : j’ai également été coupable de cette flemmardise pendant des années !

Styliser le focus des liens avec outline

Imaginons le HTML suivant, une simple phrase avec un lien :

<p>
    Connaissez-vous <a href="https://zestedesavoir.com">Zeste de Savoir</a> ?
    C'est un super site !
</p>

Lorsque l’on navigue au clavier, le style par défaut n’est pas très notable, il se voit assez peu :

Aperçu du rendu par défaut du focus avec Firefox
Aperçu du rendu par défaut du focus avec Firefox

Commençons avec l’option la plus simple : outline.

a:focus {
    outline: 3px solid red;
}

On a donc une bordure qui s’affiche sans impacter les dimensions de notre élément (c’est d’ailleurs un des avantages de la propriété outline sur border qui a une syntaxe similaire).

Aperçu du rendu avec un outline de 3px rouge sous Firefox
Aperçu du rendu avec un outline de 3px rouge sous Firefox

Mais c’est pas très beau d’avoir un si gros cadre collé au texte… que faire ?

Eh bien on utilise outline-offset !

a:focus {
    outline: 3px solid red;
    outline-offset: 4px;
}

Et voilà, lors de la navigation au clavier nos liens sont mis en valeur sans casser le design avec un cadre :

Aperçu avec `outline-offset`
Aperçu avec `outline-offset`

Et bonus : ça s’adapte automatiquement aux saut de lignes !

Aperçu avec un saut de ligne dans le lien
Aperçu avec un saut de ligne dans le lien

Oui mais si j’ai des boutons avec un arrondi, comment je fais puisque outline n’a pas d’option radius ?

Des boutons arrondis avec une bordure extérieure au focus

Je suppose que la création d’un bouton ne vous pose pas de problème :

<button>Un bouton</button>

On peut en profiter pour le styliser un peu, en lui arrondissant les angles…

button {
  appearance: none;
  font-size: inherit;
  padding: 1em;
  border: 0;
  background-color: orange;
  border-radius: 2em;
}
Aperçu du bouton orange, sans effet de survol ou focus
Aperçu du bouton orange, sans effet de survol ou focus

Seulement voilà : au focus le contour par défaut n’est pas de la bonne couleur et surtout ne suit pas la forme du bouton puisque outline n’a pas d’option radius.

Aperçu du bouton avec le style de focus par défaut de Firefox
Aperçu du bouton avec le style de focus par défaut de Firefox

Admettons que l’on applique les mêmes styles au :hover comme au :focus :

button:hover,
button:focus {
    outline: none; /* On supprime le contour par défaut du navigateur */
    box-shadow: 2px 3px 7px rgba(0,0,0,2); /* On met une petite ombre grise */
}
Aperçu du bouton avec le style du survol
Aperçu du bouton avec le style du survol

Comme vous le voyez, ça peut être suffisant au survol (quoique l’ombre n’est pas très visible), mais si on ne sait pas où est le focus actuel sur la page… difficile de s’y retrouver.

Heureusement, outline n’est pas la seule propriété qui permet de dessiner des contours sans impacter les dimensions des éléments !

button:focus {
    outline: none;
    box-shadow: 0 0 0 3px orange;
}

On profite ici de la propriété spread-radius de l’ombre pour la rendre solide.

Aperçu du bouton avec une ombre de 3px au focus
Aperçu du bouton avec une ombre de 3px au focus

Vous ne voyez pas la différence ? Ah oui, l’ombre est collée au bouton !

Malheureusement il n’y a pas d’option d'offset pour les ombres… c’est fâcheux.

Mais il y a une astuce ! Si notre fond est blanc, et que l’on applique une première ombre blanche avant celle qui est orange… on peut simuler un décalage !

button:focus {
    outline: none;
    /*
      Une première ombre fine (largeur = décalage) de la couleur du
      fond, une deuxième pour notre cadre (largeur = décalage + cadre)
    */
    box-shadow: 0 0 0 2px white, 0 0 0 5px orange;
}
Aperçu du bouton avec focus et deux ombres (une fine blanche, une large orange)
Aperçu du bouton avec focus et deux ombres (une fine blanche, une large orange)

Bonus : supprimer les pointillés de Firefox

Si vous testez sous Firefox, vous avez pu remarquer que par défaut apparaissent des pointillés à l’intérieur de votre bouton sous Windows. Il ne s’agit pas d’un outline par défaut, mais d’un pseudo élément propre à Firefox qui affiche une bordure personnalisée.

Vous pouvez le supprimer avec le sélecteur ::-moz-focus-inner :

button::-moz-focus-inner {
    border: 0;
}

Supprimez cette bordure uniquement après avoir mis en place une alternative suffisante !


Et voilà, avec quelques lignes de CSS vous avez rendu votre site plus facile à utiliser au clavier !

Voici au passage un aperçu de ce que cela peut donner avec un peu plus de styles autour :


Note : Pour tester sous macOS il faut activer la navigation au clavier
  1. Préférences Système
  2. Clavier
  3. Raccourcis
  4. Utiliser la navigation au clavier pour déplacer la cible sur les différents commandes
Capture d'écran des réglages du clavier sous macOS
Capture d'écran des réglages du clavier sous macOS

N’oubliez pas de relancer votre navigateur par la suite pour prendre en compte ce nouveau réglage.


Ce tutoriel a été inspiré par cette vidéo de Kevin Powell, qui m’a rappelé que j’avais fait cette erreur sur mon propre site (oups !).

Ces contenus pourraient vous intéresser

8 commentaires

Est-ce que c’est une bonne idée de supprimer l’élément par défaut de Firefox ? Une personne qui navigue avec Firefox n’aurait-elle pas l’habitude de cet élément, justement, et préfèrerait peut-être se repérer avec ?

+2 -0

J’ai envie de dire… ça dépend.

Il faut peut-être pas l’enlever à chaque fois, car effectivement ça peut être un repère pour certains (d’où mon rappel de ne le faire que lorsqu’une alternative suffisante existe, au moins). Mais dans certains cas ça peut avoir un intérêt, ne serait-ce que visuel, auquel cas il est intéressant de savoir comment le supprimer.
Et puis ça aide à une certaine cohérence entre les navigateurs dont certains sont fans. :)

hello. juste un petit mot pour vous dire que je suis contant de vous voir parler d’accessibilitée, c’est malheureusmeent trop rare. je suis développeur et nonvoyant aussi. et dérangé tout les jours par des sites et autre qui ne tiennent pas compte de l’accessibilitée et des screen reader.

+3 -0

Merci pour ces encouragements @tristan.bride !

J’ai encore beaucoup à apprendre, mais je fais de mon mieux pour intégrer de l’accessibilité dans les sites et applications que je développe ! :)

Je suis d’ailleurs preneur d’idées ou suggestions de choses à améliorer en priorité (ou de changements simples à faire qui peuvent être utiles) sur le Web !

hello. en soit, la plus part des trucs qui peuvent vraiment nous changer la vie sont simples. par exemple, petite amélioration sur le site serait de mettre des titres de niveau (un peu plus qu’actuelement) par exemple mettre un titre de niveau h2 ou h3 au niveau des réponces qui pourrait inclure par exemple l’auteur et la dâte du message, ce qui permettrais à la lecture d’un article de naviguer entre les commentaires en appuyant directement sur h. après je félicite déjà de la présentation des articles. j’ai lu un eccelant article sur python qui était très bien présenté et très navigable pour moi.

si jamais tu as besoin (ou quelqu’un d’autre) pour des coup de main en accessibilitée, ésite pas à me mp, (je suis pas expert avec css et js, je suis plus sur php et backend) mais enfin si je peu tester un truc pour te donner un avie… ou filer un coup de main pour y voir plus claire… c’est avec plaisir. (en fait ce qui est compliqué c’est que l’utilisation d’un screen reader ne s’improvise pas, beaucoup pensent qu’on peut voir si le site est accessible en activant simplement une synthèse genre narateur windows et en fesant un peu passer la souris à droite a gauche sur leur site et tant que ça parle c’est bon.) alors qu’en vraie, même pour une personne aveugle l’utilisation prends plusieurs mois à aprendre (et je dirais même que tout le monde ne conais pas encore très bien ces outils) les screen readers d’aujourd’hui sont de plus en plus performants et proposent de plus en plus de truc à conditions de conaitre des petits addons et autre astuces… c’est une vision assez particulière du web, exemple tout con mais , le contenu qui s’actualise en directe sur un formulaire comme dans une liste déroulante (lorsque tu navigue dans une liste déroulante et que la page s’actualise à chaque choix tu achête une paire de chaussure super classe et comme tu kif tu en veu 35 paire. hors la liste déroulante "quantitée" n’est pas éditable, et tu dois fair bouger le nombre avec les flèches. lorsque le prix va s’actualiser sur ta page, le mode formulaire ou les flèches du clavier permettent de règler la valeur va se désactiver, tu va revenir en haut de la page, (donc tu devra redescendre jusqu’à la liste déroulante, recommencer à intéragire avec en fesant espace, puis c’est repartie pour règler la valeur avec les flèches) ça 35 fois;.. je te laisse imaginer le truc… :d je crois que le pire étant encore de tout simplement pas en tenir compte et dire après coup aux utilisateurs "ah désolé mais c’est pas prioritaire alors bon… on vaira un jour dans une mise à jour si on a le temps…" et ça, si j’avais gagné un euro à chaque fois que j’avais entendu cette réponse… je crois que je pourrais racheter facebook et twitter tout en ayant encore un petit capitale de côté lol

ps: tiens je sais pas trop ce qui peut provoquer ça, mais je viens de voir un truc marant sur les formulaires du site. en temps normale, lorsque je sélectionne par exemple mot par mot en fesant ctrl maj flèche droite du texte pour le modifier, mon screen reader dit simplement le mot puis "sélectionné" genre si je tape: bonjour, comment ça va? et que je séléctionne en fesant la manip plus haut, j’entendrai: "bonjour (sélectionné) comment (sélectionné) ça (sélectionné…) ici, sur le site, lorsque je fais ça, mon screen reader dira plus tôt: "bonjour (sélectionn"), bonjour comment (sélectionné), bonjour comment ça (sélectionné)… heureusement j’ai pas de trop longue sélection à faire :d

+6 -0

Salut !

Merci pour ton retour, nous sommes très friands de ce genre de message car ça nous aide à savoir dans quelle direction aller et surtout ce qui est important pour les utilisateurs.

Comme on améliore le site chacun sur son temps libre et avec notre propre ensemble de compétences, on ne peut pas te dire quand le retour sera mis en place sur le site, mais tu peux être sûr qu’on va améliorer tout ça.

coucou. pas de soucis je comprend tout à fait que ça puisse prendre un peu de temps. (je soutiens à 2°% votre action de partage du savoir c’est indispensable dans notre monde d’informations numériques. d’autant si vous vous engagez à l’accessibilitée du contenu. comme dit il est encore malheureusement plus simple de trouver du contenu accessible (en braille papier), partout en france distribué par les témoins de géoàva que du contenu scientifique ou autre informations vitales en braille et en format lisible… surtout pour des publiques gèné à la lecture votre action est vitale).

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte