3. Détacher le focus du contrôle

Tu rends les actions PulsaConf perceptibles à la souris, au clavier et en modes contraints. Éloigne le contour pour qu'il reste visible contre la bordure et ne masque pas le libellé. Applique ce choix à .action, puis vérifie que focus, hover, disabled et couleurs forcees restent lisibles.

Objectifs de la leçon

  • Implémenter 3. Détacher le focus du contrôle sans perdre le scenario PulsaConf.
  • Relier outline-offset au risque : un état joli mais invisible au clavier exclut une partie des utilisateurs.
  • Prouver que focus, hover, disabled et couleurs forcees restent lisibles.

Intention

Tu rends les actions PulsaConf perceptibles à la souris, au clavier et en modes contraints. Éloigne le contour pour qu'il reste visible contre la bordure et ne masque pas le libellé. Applique ce choix à .action, puis vérifie que focus, hover, disabled et couleurs forcees restent lisibles.

outline-offset doit repondre à une contrainte visible, pas décorer au hasard.

Méthode

Cible .action, ajoute une declaration utile, puis inspecte la règle active.

Le risque a éviter est : un état joli mais invisible au clavier exclut une partie des utilisateurs.

Validation

3. Détacher le focus du contrôle est termine quand les tests passent et que focus, hover, disabled et couleurs forcees restent lisibles.

Relis aussi le focus, les textes longs et le petit écran.

Vocabulaire lié

  • outline-offset — Propriété ou motif CSS valide dans cette étape.
  • .action — Sélecteur cible pour limiter les effets de bord.
  • responsive — Capacité à rester utilisable selon les contraintes d'écran et de contenu.

Validation

  • Je sais appliquer outline-offset.
  • Je prouve que focus, hover, disabled et couleurs forcees restent lisibles.
  • Je peux expliquer le choix.

Ouvrir la leçon interactive