CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 5 · Exercice de TD
Rendre le focus
Le modèle de boîte · niveau 2
Énoncé
Un développeur trouve « moche » le cadre qui apparaît autour des boutons cliqués, et écrit :
body {
margin: 16px;
font-family: system-ui, sans-serif;
}
/* Erreur : l'utilisateur au clavier ne sait plus où il est */
a:focus,
button:focus {
outline: none;
}Expliquer pourquoi c'est une faute, puis proposer une règle qui garde un contour visible au clavier seulement, en ocre foncé #a8520a, de 3 pixels, écarté de 2 pixels. Ce contour change-t-il la taille des boutons ?
Corrigé
Sans contour de focus, une personne qui navigue au clavier (handicap moteur, lecteur d'écran avec affichage, ou simple habitude) ne voit plus quel lien ou bouton est actif. On garde le contour, réservé au clavier par :focus-visible (au clic de souris, le navigateur ne l'affiche pas) :
body {
margin: 16px;
font-family: system-ui, sans-serif;
}
a:focus-visible,
button:focus-visible {
outline: 3px solid #a8520a;
outline-offset: 2px;
}#a8520a a un contraste de 5,42:1 avec le blanc, au-delà des 3:1 demandés pour un indicateur de focus. Le contour ne fait pas partie de la boîte : la taille des boutons ne change pas.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.