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

Fieldset mit Formularfeldern

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-fieldset__legend">
  Ansprechpartner
</legend>
<div class="kern-fieldset__content">
  <div class="kern-form-input">
    <label class="kern-form-input__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-form-input__label" for="name">Name</label>
    <input class="kern-form-input__input" id="name" name="name" type="text">
  </div>
<div>
</fieldset>

Fieldset mit Hint

Code anzeigen

<fieldset class="kern-fieldset" aria-describedby="hint-text">
<legend class="kern-fieldset__legend">
  Ansprechpartner
</legend>
<div class="kern-fieldset__hint" id="hint-text">Hint Text</div>
<div class="kern-fieldset__content">
  <div class="kern-form-check">
    <input class="kern-form-check__checkbox" id="herr" name="geschlecht" type="checkbox">
    <label class="kern-form-check__label" for="herr">Herr</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__checkbox" id="frau" name="geschlecht" type="checkbox">
    <label class="kern-form-check__label" for="frau">Frau</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__checkbox" id="divers" name="geschlecht" type="checkbox">
    <label class="kern-form-check__label" for="divers">Divers</label>
  </div>

  <div class="kern-form-input">
    <label class="kern-form-input__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-form-input__label" for="name">Name</label>
    <input class="kern-form-input__input" id="name" name="name" type="text">
  </div>
<div>
</fieldset>

Fieldset mit Error

Code anzeigen

<fieldset class="kern-fieldset kern-fieldset--error">
<legend class="kern-fieldset__legend">
  Ansprechpartner
</legend>
<div class="kern-fieldset__content">
  <div class="kern-form-input">
    <label class="kern-form-input__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-form-input__label" for="name">Name</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-text">Der Name darf nicht leer sein</span>
</p>
</fieldset>

Fieldset horizontal

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-fieldset__legend">
  Ansprechpartner
</legend>
<div class="kern-fieldset__content kern-fieldset__content--horizontal">
  <div class="kern-form-input">
    <label class="kern-form-input__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-form-input__label" for="name">Name</label>
    <input class="kern-form-input__input" id="name" name="name" type="text">
  </div>
<div>
</fieldset>

Verwendungsregeln

• Verwende Fieldsets zur Gruppierung verwandter Formularfelder:

  • Gruppiere verwandte Eingabefelder, um die Struktur und Zugänglichkeit des Formulars zu verbessern.
  • Verwende das <legend>-Element, um eine aussagekräftige Beschriftung für das Fieldset bereitzustellen.

• Verwende Fieldsets für visuelle Gruppierungen:

  • Verwende Fieldsets, um visuelle Gruppierungen von Eingabefeldern zu erstellen, die zusammengehören.
  • Dies kann durch CSS-Klassen wie .kern-fieldset__content--horizontal unterstützt werden, um die Felder horizontal anzuordnen.

• Verwende Fieldsets für Fehlermeldungen:

  • Gruppiere Eingabefelder, die zusammengehören, und zeige Fehlermeldungen innerhalb des Fieldsets an.
  • Verwende das aria-describedby-Attribut, um die Fehlermeldung mit dem entsprechenden Eingabefeld zu verknüpfen.

Dos und Don’ts

Dos:

• Gruppiere verwandte Formularfelder zusammen.
• Verwende eine klare und prägnante Beschriftung im <legend>-Element.
• Nutze Fieldsets, um die Struktur und Zugänglichkeit des Formulars zu verbessern.
• Verwende CSS-Klassen, um die visuelle Darstellung des Fieldsets anzupassen.

Don’ts:

• Verwende keine Fieldsets für nicht verwandte Elemente.
• Lasse das <legend>-Element nicht leer.
• Verwende keine Fieldsets, wenn keine logische Gruppierung der Felder erforderlich ist.

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften (Größe, Kontrastverhältnis) für barrierefreie Dienste. Achte in der angewandten Nutzung darauf, dass Labels auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind.

• Das <legend>-Element sollte eine klare und prägnante Beschreibung des Inhalts des Fieldsets bieten.
• Verwende das aria-describedby-Attribut, um Fehlermeldungen mit den entsprechenden Eingabefeldern zu verknüpfen.
• Stelle sicher, dass alle Eingabefelder innerhalb des Fieldsets über entsprechende Labels verfügen.
• Verwende keine Sonderzeichen als Icons innerhalb von Labels, da diese vom Screenreader als Schrift interpretiert und vorgelesen werden können.
• Falls Sonderzeichen zwingend genutzt werden müssen, sollten diese über ein aria-hidden="true" für den Screenreader versteckt werden.
• Inaktive Eingabefelder sollten über ein aria-disabled="true" ausgezeichnet werden und nicht nur mittels disabled. Diese Felder müssen trotz Inaktivität per Tastatur ansteuerbar und für den Screenreader ausgebbar sein.
• Für die Sprachsteuerung muss die sichtbare Beschriftung eines Eingabefelds auch mit dem „assistiven“ Namen (z.B. aria-label) übereinstimmen bzw. Inhalt von dessen sein.

Siehe auch: BFIT Handreichungen