Regrouper les champs avec fieldset et legend
Regroupez correctement les commandes associées, comme les groupes de boutons radio.
Regrouper les champs avec fieldset et legend est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. 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 Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Certains champs vont ensemble
Un ensemble de boutons radio ou de cases à cocher associées forme une seule question, et non plusieurs. L’élément fieldset les regroupe en une unité. 🧩
Le groupe a besoin d’un nom
Chaque commande possède sa propre étiquette, mais le groupe entier en a aussi besoin. La legend donne à l’ensemble une question commune.
legend vient en premier
La legend doit être le premier enfant du fieldset. Elle sert de légende que les lecteurs d’écran associent à chaque commande qu’il contient.
<fieldset>
<legend>Shipping speed</legend>
</fieldset>Un groupe de boutons radio complet
Ici, un fieldset entoure les choix et la légende pose la question. Chaque bouton radio conserve sa propre étiquette.
<fieldset>
<legend>Size</legend>
<label><input type="radio" name="s"> Small</label>
<label><input type="radio" name="s"> Large</label>
</fieldset>Ce qu’entendent les lecteurs d’écran
Lorsqu’un utilisateur se déplace sur un bouton radio groupé, un lecteur d’écran annonce la legend ainsi que l’option, par exemple « Taille, petite ». Le contexte est fourni automatiquement.
Les boutons radio sont le cas classique
Les boutons radio partageant un nom constituent l’usage classique. Sans fieldset, les utilisateurs entendent des options sans savoir à quelle question elles répondent.
Les ensembles de cases à cocher aussi
Une liste à sélection multiple comme « Choisissez vos centres d’intérêt » forme également un groupe. Un fieldset relie les cases à cocher à une même consigne.
Regrouper des champs de saisie distincts
Les champs d’adresse répartis entre plusieurs zones de saisie en bénéficient également. Une legend comme « Adresse de facturation » donne un cadre à toute la section.
N’en abusez pas
Une seule zone de saisie textuelle n’a pas besoin d’un fieldset. Réservez le regroupement aux champs qui répondent réellement ensemble à une même question.
La mise en forme est flexible
La bordure par défaut paraît vieillotte, mais vous pouvez la modifier librement avec CSS. La sémantique reste intacte, quelle que soit son apparence.
ARIA est le dernier recours
Si un fieldset réel est impossible, le rôle group avec aria-labelledby peut l’imiter. Privilégiez l’élément natif chaque fois que possible.
Vérification rapide
Quel élément donne un nom à un fieldset pour les technologies d’assistance ?
Récapitulatif
Entourez les commandes associées d’un fieldset et donnez-leur une légende avec une legend. Les ensembles de boutons radio et de cases à cocher gagnent un contexte sur lequel tout le monde peut compter. ✅
Questions Fréquemment Posées
La leçon « Regrouper les champs avec fieldset et legend » est-elle gratuite ?
Oui — le texte complet de « Regrouper les champs avec fieldset et legend » 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 Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Regrouper les champs avec fieldset et legend » ?
Regroupez correctement les commandes associées, comme les groupes de boutons radio. Tu pratiques Web Accessibility 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 Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility 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 3 sur 4.
Combien de temps prend la leçon « Regrouper les champs avec fieldset et legend » ?
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 Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility 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
- Chaque entrée nécessite un véritable label
- Un placeholder n’est pas une étiquette
- Regrouper les champs avec fieldset et legend
- Texte d’aide et champs obligatoires annoncés