Grouping Fields With fieldset and legend
Bundle related controls like radio sets correctly.
Grouping Fields With fieldset and legend is a free Web Accessibility Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Some Fields Belong Together
A set of radio buttons or related checkboxes is one question, not many. The fieldset element groups them as a unit. 🧩
The Group Needs a Name
Each control has its own label, but the whole group needs one too. The legend gives the set a shared question.
legend Goes First
The legend must be the first child of the fieldset. It acts as the caption that screen readers tie to every control inside.
<fieldset>
<legend>Shipping speed</legend>
</fieldset>A Complete Radio Group
Here a fieldset wraps the choices and the legend asks the question. Each radio still keeps its own label.
<fieldset>
<legend>Size</legend>
<label><input type="radio" name="s"> Small</label>
<label><input type="radio" name="s"> Large</label>
</fieldset>What Screen Readers Hear
Moving to a grouped radio, a screen reader announces the legend plus the option, like Size, Small. Context comes for free.
Radios Are the Classic Case
Radio buttons sharing a name are the textbook use. Without a fieldset, users hear options with no idea what they answer.
Checkbox Sets Too
A multi-select list like Choose your interests is also a group. A fieldset ties the checkboxes to one shared prompt.
Split Single Inputs
Address fields broken across multiple inputs benefit too. A legend like Billing address frames the whole section.
Do Not Overuse It
A lone text input does not need a fieldset. Reserve grouping for fields that truly answer one question together.
Styling Is Flexible
The default border looks dated, but you can restyle it freely with CSS. Semantics stay intact no matter how it looks.
ARIA Is the Last Resort
If a real fieldset is impossible, role group with aria-labelledby mimics it. Prefer the native element whenever you can.
Quick Check
What element names a fieldset for assistive tech?
Recap
Wrap related controls in a fieldset and caption them with a legend. Radio and checkbox sets gain context every user can rely on. ✅
Frequently asked questions
Is the “Grouping Fields With fieldset and legend” lesson free?
Yes — the full text of “Grouping Fields With fieldset and legend” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Grouping Fields With fieldset and legend”?
Bundle related controls like radio sets correctly. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Grouping Fields With fieldset and legend” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Every Input Needs a Real label
- Placeholder Is Not a Label
- Grouping Fields With fieldset and legend
- Help Text and Required Fields, Announced