FigmaOpenCode

Fieldset

Synonyme: Formulargruppe, Eingabebereich, Formularabschnitt
Ähnliche Komponenten: –

Kurzbeschreibung

Ein Fieldset gruppiert zusammengehörige Formularfelder und kann eine Hierarchie aufbauen. Es wird verwendet, um verwandte Elemente in einem Formular visuell und semantisch zu gruppieren.

Beispiele

Gruppierte Formularfelder

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-label kern-label--large">
  Ansprechpartner
</legend>
<div class="kern-fieldset__body">
  <div class="kern-form-input">
    <label class="kern-label" for="vorname">Vorname</label>
    <input class="kern-form-input__input" id="vorname" name="vorname" type="text">
  </div>
  <div class="kern-form-input">
    <label class="kern-label" for="name">Familienname</label>
    <input class="kern-form-input__input" id="name" name="name" type="text">
  </div>
<div>
</fieldset>

Hinweistext und Fehlermeldung

Code anzeigen

<fieldset class="kern-fieldset kern-fieldset--error">
<legend class="kern-label kern-label--large">
  Ansprechpartner
</legend>
<div class="kern-hint" id="hint-text">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<div class="kern-fieldset__body">
  <div class="kern-form-input">
    <label class="kern-label" for="vorname">Vorname</label>
    <input class="kern-form-input__input" id="vorname" name="vorname" type="text" aria-describedby="kern-error">
  </div>
  <div class="kern-form-input">
    <label class="kern-label" for="name">Familienname</label>
    <input class="kern-form-input__input kern-form-input__input--error" id="name" name="name" type="text" aria-describedby="kern-error">
  </div>
</div>
<p class="kern-error" id="kern-error" role="alert">
  <span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
  <span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</fieldset>

Horizontale Ausrichtung

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-label">
Wo sind Sie aktuell gemeldet?
</legend>
<div class="kern-fieldset__body kern-fieldset__body--horizontal">
<div class="kern-form-check">
  <input class="kern-form-check__radio" id="hamburg" name="meldeadresse" type="radio">
  <label class="kern-label" for="hamburg">in Hamburg</label>
</div>
<div class="kern-form-check">
  <input class="kern-form-check__radio" id="ausland" name="meldeadresse" type="radio">
  <label class="kern-label" for="ausland">im Ausland</label>
</div>
<div>
</fieldset>

Beschreibung

Ein Fieldset besteht aus einer Legende (<legend>) und einer Gruppe von zusammengehörigen Formularelementen, wie z. B. Checkboxen oder Eingabefeldern. Die Legende beschreibt den Inhalt der Gruppe möglichst prägnant und trägt zur besseren Orientierung bei – insbesondere für Nutzende mit Assistenztechnologien.
Standardmäßig nutzt die Legende die CSS-Klasse kern-label, um eine einheitliche Beschriftung im Stil anderer Formularlabels sicherzustellen. Bei Bedarf kann sie durch die zusätzliche Klasse kern-label--large vergrößert werden, um inhaltliche Hierarchien innerhalb eines Formulars visuell hervorzuheben.
Ergänzend kann oberhalb der Gruppe ein Hinweistext erscheinen, z. B. zum Format oder zur erwarteten Eingabe. Fehlermeldungen, die sich auf die gesamte Gruppe beziehen, werden unterhalb des Fieldsets angezeigt.
Die enthaltenen Formularelemente können sowohl vertikal als auch horizontal angeordnet werden. Eine horizontale Anordnung erfolgt mithilfe der CSS-Klasse .kern-fieldset__body--horizontal.

Verwendungsregeln

Ein Fieldset dient der logischen Gruppierung zusammengehöriger Formularelemente – unabhängig vom Eingabetyp. Es verbessert die visuelle Struktur und sorgt für eine bessere Zugänglichkeit, insbesondere für Screenreader. Besonders sinnvoll ist der Einsatz bei mehrteiligen Angaben wie Adressen oder Datumsfeldern sowie bei Checkbox- und Radiogruppen, die sich auf eine gemeinsame Frage beziehen.
Bei Fehlermeldungen, die sich auf eine ganze Gruppe beziehen, sollte die Meldung innerhalb des Fieldsets platziert und über das Attribut ‘aria-describedby’ mit dem Fieldset oder den zugehörigen Feldern verknüpft werden.

Dos und Don’ts

• Verwende Fieldsets nur für inhaltlich zusammenhängende Elemente.
• Für Checkbox-Listen und Radios ist ein Fieldset zwingend erforderlich.
• Verwende kein Fieldset bei einer einzelnen Checkbox, z. B. bei dem Akzeptieren einer Datenschutzerklärung.
• Nutze Fieldsets nur, wenn eine gemeinsame Legende, Fehlermeldung und ein Hinweis sinnvoll sind.
• Verwende eine klare und prägnante Beschriftung für die Legende (<legend>).
• Lasse die Legende (<legend>) nicht leer.
• Verwende CSS-Klassen, um die visuelle Darstellung des Fieldsets anzupassen.
• Formularfeldgruppen sollten nicht ineinander verschachtelt werden.

Barrierefreiheit

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 2.4.3

Fieldset-Navigationsreihenfolge ist logisch

Implementierungsabhängig

WCAG 2.4.6

Fieldset hat aussagekräftige Legend

Implementierungsabhängig

WCAG 3.3.2

Fieldset-Anweisungen sind verfügbar

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.3.1

Fieldset-Gruppe ist programmatisch erkennbar

Bestanden

WCAG 1.4.6

Fieldset-Text erfüllt das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 2.1.1

Fieldset-Inhalte sind per Tastatur navigierbar

Bestanden

WCAG 3.3.1

Fieldset-Fehler werden gruppiert kommuniziert

Bestanden

WCAG 4.1.1

Fieldset-HTML ist valide und wohlgeformt

Siehe auch: BFIT Handreichungen