1. Découvrir les trois rôles
Un bouton interactif combine souvent trois technologies. Active-les une par une et observe le résultat. Le retour textuel est conservé dans cette simulation pour que l'expérience reste compréhensible.
2. Observer et comparer
La colonne « Sans » montre la situation de référence. La colonne « Avec tes choix » change immédiatement.
Un bouton visible, mais inactif dans cet exemple.
Le bouton est visible.
Pourquoi ce résultat ?
3. Construire une petite interaction réutilisable
Choisis le texte du bouton et le message qu'il affichera. Tu obtiendras un exemple HTML, CSS et JavaScript à copier dans un fichier .html personnel.
Ton interaction en direct
Code à réutiliser
Comment essayer ce code dans mon projet ?
Crée un fichier nommé essai-bouton.html, colle le code, enregistre-le puis ouvre-le dans ton navigateur. Clique sur le bouton. Modifie ensuite le texte et observe ce qui change. Aucune publication n'est nécessaire.
Que retenir sur l'accessibilité ?
Le texte visible doit expliquer l'action. Le résultat doit être lisible, pas seulement indiqué par une couleur. Le bouton doit pouvoir être activé au clavier avec Entrée ou Espace.