De nombreuses personnes ne peuvent utiliser la souris, par exemple en cas de handicap moteur ou simplement n’importe qui… qui voit sa souris sans fil tomber en panne de piles !

Quand on navigue au clavier, un point important est de savoir exactement où l’on se situe dans la page. La touche tabulation permet de parcourir tous les liens de la page et donc de naviguer sur les sites Web.

L’outline est en général une sorte de bordure qui entoure le lien sur lequel le focus clavier se situe.

Voici un exemple sur la page d’accueil d’OpenWeb.

Le problème

De nombreux systèmes dits de « reset CSS » (ou réinitialisation CSS) annulent cette propriété, par exemple :

a, form, input, textarea, select, button, ul, ol, li {
outline-style : none;
outline-color : invert;
outline-width : 0;
}

Ou plus simplement avec outline: 0;.

Autant ne pas prendre de détour : l’annulation de cette propriété rend extrêmement difficile voir impossible de naviguer au clavier sur les sites Web, car il devient impossible de savoir précisément sur quel lien on se situe.

Une première piste d’amélioration

Un premier réflexe à prendre donc est de vérifier que l’outline n’est pas annulé. Il serait aisé de se dire « c’est bon, la propriété n’est pas annulée dans la CSS, donc point traité ! ». Il faut quand même faire quelques petites vérifications supplémentaires !

La couleur de l’outline est déterminée par la couleur du lien. Encore une fois, il serait rapide de se dire « ma couleur de lien est suffisamment contrastée par rapport à la couleur de fond, donc plus de risque ! ».

Prenons un exemple avec cette première page de test. Les liens du bandeau sont en blanc sur fond rouge. L’outline n’est pas annulé, et pourtant il va être très difficile dans ce cas de le voir quand le focus clavier sera sur ces liens.

La raison est simple : l’outline sera bien là autour du lien, mais en blanc… sur fond blanc ! Difficile de le voir dans ce cas. Ce cas peut se présenter par exemple avec une image de fond qui ne s’est pas chargée correctement (dans ce cas, pensez à prévoir une couleur de fond en plus de votre image), ou un simple oubli.

Dans ce second exemple de page de test, un simple fond noir a été appliqué. L’outline est désormais mieux visible.

Offrons mieux

Présupposer de la couleur de fond pour l’outline peut parfois être un calcul risqué ou insuffisant. Et pourtant, avec très peu d’efforts, cela peut être grandement amélioré.

Souvent les liens ont un graphisme en état survolé (hover). Dans ce troisième exemple, le survol de la souris applique une bordure noire et une couleur noire aux liens du bandeau.

#entete li a:hover {
  color: #000;
  border: 2px dashed #000;
  padding-left:5px;
  padding-right: 5px;
}

Il suffit de doubler cette propriété avec le pseudo-état focus, et ainsi le focus clavier sera clairement indiqué à l’internaute.

#entete li a:hover,
#entete li a:active,
#entete li a:focus {
  color: #000;
  border: 2px dashed #000;
  padding-left:5px;
  padding-right: 5px;
}

Peu d’efforts sont à fournir pour le concepteur du site, et vos internautes navigant au clavier vous en seront très reconnaissants, comme vous pourrez le constater dans ce troisième exemple de page de test.

Conclusion et vidéos

En guise de conclusion, nous vous invitons à vérifier que vos liens ne souffrent pas de ce problème, et tant qu’à faire, autant proposer toujours plus de confort à votre audience navigant au clavier !

Afin de présenter cet aspect de manière plus ludique, vous pouvez consulter la vidéo faite par Tanguy Loheac concernant la visibilité du focus.

Si vous avez une préférence pour la lecture, nous vous invitons à regarder la version sous-titrée de la même vidéo de Tanguy Loheac concernant la visibilité du focus.