Rendre le focus — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 2)

Rendre le focus

Sélecteurs · niveau 1 (application)

Énoncé

Un développeur a ajouté à sa feuille :


a {
  color: #1f3a68;
}

/* « Ces cadres autour des liens sont laids » */
*:focus {
  outline: none;
}

Que perd un visiteur qui navigue au clavier ? Remplacer cette règle par une règle qui rend au contraire le focus plus visible, sans afficher de cadre lors d'un simple clic de souris.

Corrigé

Avec outline: none sur tous les éléments, celui qui navigue au clavier (touche Tab) ne voit plus quel lien ou quel champ est actif : il avance à l'aveugle. C'est l'un des défauts d'accessibilité les plus graves et les plus fréquents.


a {
  color: #1f3a68;
}

/* Un focus net, visible seulement à la navigation au clavier */
:is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #e07a1f;
  outline-offset: 2px;
}

:focus-visible n'est vraie que lorsque le navigateur juge le focus utile à montrer : toujours au clavier, généralement pas après un clic de souris sur un lien ou un bouton. Le cadre ocre de 3 pixels, décalé de 2 pixels, se voit sur tous les fonds de la charte.