Leçon 5 : accessibilité — focus, clavier et ARIA
Tu as stylé un `<div>` avec `onClick` qui ressemble à un bouton parfait. Mais un utilisateur au clavier ne peut pas l'atteindre, et un lecteur d'écran ne sait pas que c'est cliquable. Cette leçon t'apprend à construire des composants accessibles dans le design system : des contrôles sémantiques, un
Un vrai bouton, c'est comme une porte avec une poignée — tout le monde peut l'ouvrir, à la main ou au clavier. Un `<div>` cliquable, c'est un mur peint pour ressembler à une porte : ça a l'air bien, mais il n'y a rien à attraper.
- semantic control
- Un élément HTML doté d'un sens intégré — `<button>`, `<a>`, `<input>` — qui apporte gratuitement le support clavier, le focus et un rôle d'accessibilité, sans code supplémentaire.
- focus-visible
- Un état qui affiche un focus ring uniquement pendant la navigation au clavier, pas lors des clics de souris. Dans Tailwind : `focus-visible:ring-2` — un signal clair pour les utilisateurs au clavier sans déranger les utilisateurs à la souris.
- aria-label
- Un attribut qui donne un nom accessible à un élément sans texte visible — comme un bouton avec seulement une icône — pour qu'un lecteur d'écran puisse annoncer ce qu'il fait.
- keyboard operability
- La capacité d'utiliser chaque contrôle avec le seul clavier — Tab pour le focus, Entrée/Espace pour activer — une exigence de base en accessibilité.
