Focus

La prise de focus s’effectue sur un élément soit lorsqu’il est sélectionné à l’aide du clavier avec la touche tabulation, soit lorsqu’il est activé avec la souris comme par exemple pour le champ d’un formulaire.

Le focus d’un élément est représenté par un contour de couleur, un rectangle en surbrillance ou en pointillés. Il permet de se repérer sur une page internet.

Il est essentiel pour les personnes qui naviguent au clavier, qui s’en servent comme point de repère.

Bien que le navigateur mette déjà en forme le focus avec un contour bleu autour de l’élément, rien ne vous empêche d’accentuer sa visibilité dans le code CSS de votre site.

En CSS

La pseudo-classe :focus vous permet de cibler un élément lorsque celui-ci reçoit le focus.

Par exemple pour qu’un lien à la prise de focus est un contour de 2px rouge, le code sera le suivant :

a:focus { outline : 2px solid Red;}

Pour mettre la même prise de focus sur tous les éléments, il vous suffit de mettre dans votre code CSS. 

Dans cet exemple tous les éléments au focus auront un contour de 2px noir.

:focus { outline: 2px solid black}

Veillez à respecter un contraste suffisant pour qu’il soit facile de le repérer sur la page, par :

  • des personnes ayant une vision faible,
  • ou des personnes qui consultent la page dans un endroit fortement éclairé, dehors au soleil par exemple.

Il ne faut jamais retirer l’indicateur de focus sans le remplacer par un autre indicateur.

Ce code là est donc à proscrire

:focus { outline: none; }

S’il se trouve dans votre code CSS, vous pouvez simplement supprimer ce petit bout de code.
Le navigateur reprendra le dessus et ajoutera de nouveau le fameux contour bleu lors de la prise de focus.

Ou vous pouvez le modifier comme vu un peu plus haut pour le mettre au couleur de votre site.