Felder mit fieldset und legend gruppieren
Bündeln Sie zusammengehörige Steuerelemente wie Radiogruppen korrekt.
Felder mit fieldset und legend gruppieren ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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. ✅
Häufig gestellte Fragen
Ist die Lektion „Felder mit fieldset und legend gruppieren“ kostenlos?
Ja — der vollständige Text von „Felder mit fieldset und legend gruppieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Felder mit fieldset und legend gruppieren“?
Bündeln Sie zusammengehörige Steuerelemente wie Radiogruppen korrekt. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Felder mit fieldset und legend gruppieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Jede Eingabe braucht ein echtes label
- Placeholder ist kein Label
- Felder mit fieldset und legend gruppieren
- Hilfetexte und Pflichtfelder ansagen lassen