Sémantique, libellés, rôles et focus
Utilisez une sémantique correcte, reliez les libellés aux champs, appuyez-vous sur les rôles et déplacez le focus là où l’utilisateur en a besoin.
Sémantique, libellés, rôles et focus est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 3 leçons au total.
Pourquoi les bases de l’accessibilité
Objectif : Rendez l’interface compréhensible par les technologies d’assistance.
- Utilisez de vrais éléments (button, nav, form)
- Donnez aux champs de saisie des étiquettes appropriées
- Gérez le focus dans les différents parcours
Vue d’ensemble des sémantiques et des rôles
- Privilégiez la sémantique native : button plutôt que div
- Les rôles implicites sont fournis par les vrais éléments
- Ajoutez ARIA uniquement lorsque la sémantique native ne suffit pas
Champs de saisie étiquetés (correct)
Créez des champs de saisie avec des étiquettes associées et une région dynamique pour les retours d’information.
<div id="root"></div>
Boutons et état de bascule
Utilisez un vrai bouton et exposez son état avec aria-pressed pour les bascules.
<div id="root"></div>
Placer le focus à l’ouverture (bonne UX)
Déplacez le focus vers le panneau nouvellement ouvert afin que les utilisateurs du clavier puissent commencer à saisir immédiatement.
<div id="root"></div>
Conseils et pièges
- Privilégiez les éléments natifs ; ajoutez ARIA uniquement si nécessaire
- Les étiquettes donnent aux champs de saisie un nom fiable
- Gérez le focus lors de l’ouverture de superpositions ou après une navigation
Bonne pratique pour l’étiquetage
Récapitulatif
Récapitulatif : Utilisez la sémantique réelle, associez les étiquettes aux champs de saisie, exposez l’état avec les rôles ou ARIA lorsque cela est nécessaire et déplacez le focus vers l’endroit où les utilisateurs doivent agir ensuite.
Questions Fréquemment Posées
La leçon « Sémantique, libellés, rôles et focus » est-elle gratuite ?
Oui — le texte complet de « Sémantique, libellés, rôles et focus » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Sémantique, libellés, rôles et focus » ?
Utilisez une sémantique correcte, reliez les libellés aux champs, appuyez-vous sur les rôles et déplacez le focus là où l’utilisateur en a besoin. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.
Combien de temps prend la leçon « Sémantique, libellés, rôles et focus » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Sémantique, libellés, rôles et focus
- Interactions au clavier et liens d’évitement
- Bases des tests d’accessibilité