Lab Etats accessibles
Assemble des états interactifs accessibles avec des règles lisibles, testables et reliées au scenario PulsaConf.
Objectifs de la leçon
- Implémenter Lab Etats accessibles sans perdre le scenario PulsaConf.
- Relier :focus-visible 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
Assemble des états interactifs accessibles avec des règles lisibles, testables et reliées au scenario PulsaConf.
:focus-visible 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
Lab Etats accessibles 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é
- :focus-visible — 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 :focus-visible.
- Je prouve que focus, hover, disabled et couleurs forcees restent lisibles.
- Je peux expliquer le choix.