États interactifs
Ajoute un état :focus-visible clair aux boutons pour la navigation clavier.
Objectifs de la leçon
- Différencier état normal et pseudo-classe
- Créer un focus fortement visible
- Utiliser focus-visible sans retirer l'indicateur natif sans remplacement
Comprendre le principe
À la fin de cette leçon, tu sauras différencier état normal et pseudo-classe.
À la fin de cette leçon, tu sauras créer un focus fortement visible.
À la fin de cette leçon, tu sauras utiliser focus-visible sans retirer l'indicateur natif sans remplacement.
Focus perceptible
Le contour contrasté reste séparé du bouton et facile à repérer.
La pseudo-classe cible un moment précis de l'interaction.
outline dessine l'indicateur.
Pourquoi éviter : Focus supprimé
La navigation clavier devient invisible sans solution de remplacement.
Un état interactif doit communiquer clairement ce qui est prêt à recevoir une action.
Vocabulaire lié
- pseudo-classe — Mot-clé précédé de : qui cible un état.
- focus — Élément recevant actuellement les actions du clavier.
- :focus-visible — État de focus affiché lorsque l'indicateur est utile, notamment au clavier.
Validation
- Je peux expliquer : Un état interactif doit communiquer clairement ce qui est prêt à recevoir une action.
- Je peux différencier état normal et pseudo-classe.
- Je peux créer un focus fortement visible.