Components Forms

Checkliste

Barrierefreie Formulare

Bitte beachten Sie, dass die folgende Auflistung auf dem Dokument „Checkliste für barrierefreie Dokumente“ aufbaut.

Ein Formular ist barrierefrei, wenn:

  • das Formular so benannt ist, dass der Inhalt klar ersichtlich ist.
  • jedes Feld des Formulars eine Formularbeschriftung enthält, die (auch ohne den Kontext zu kennen) klar vermittelt, welche Informationen dort gefordert sind.
  • jedes Feld einen Alternativtext enthält. Die Alternativtexte geben Informationen zum Ausfüllen des Feldes (bei Pflichtfeldern beispielsweise „Bitte ausfüllen“)
  • Pflichtfelder besonders gekennzeichnet sind und dieses Kennzeichen zu Beginn des Formulars erläutert wurde.
  • die Wichtigkeit der Felder von oben nach unten abnimmt.
  • das Formular über die Tastatur zu bedienen ist.
  • die Beschriftungen seitenübergreifend konsistent sind.
  • jederzeit zu erkennen ist, an welcher Stelle des Formulars man sich befindet (Lesezeichen).
  • zusätzlich zum Text allgemeinverständliche Symbole verwendet wurden.
  • nach Absenden des Formulars Fehler deutlich gekennzeichnet werden (noch besser: Erklärung der Korrekturen für Fehlereingaben angezeigt werden).
  • die Eingaben vor dem Abschicken nochmal überprüft werden können.
  • das Formular auch nach dem Abschicken noch gelöscht (zurückgezogen) werden kann.
Info

Diese Übersicht ist nur eine visuelle Darstellung aller Form-Elemente. "Alle auf einen Blick"
Codebeispiele mit Detailinformationen befinden sich auf Seiten der einzelnen Elemente.

Input

Infotext

Label
Radio List horizontal - Invalid

Fusce posuere

Sorry, that username's taken. Try another?

Infotext

Sorry, that username's taken. Try another?

Textarea

Sie haben noch 200 Zeichen übrig

Sie haben noch 200 Zeichen übrig

Sorry, that username's taken. Try another?

Select

Example invalid custom select feedback

Checkboxes

Gib Lorem Ipsum ein

Checkboxes List (Fieldset)

Label
Optionen

Wähle mindestens eine Option aus

Radios

Radio List (Fieldset)

Radio List horizontal

Fusce posuere

Radio List horizontal - Invalid

Fusce posuere

Label
Label
Lorem Ipsum

Fusce posuere

Gebe Lorem Ipsum ein

Radio Boxed (Fieldset) - deprecated

!
Radio Boxed ist Obsolet (deprecated)

Diese Komponente soll nicht eingesetzt werden, die wird aus den zukünftigen Version entfern!

Label
Label

Wählen Sie eine Option

Toggle

Toggle List (Fieldset)

Toggle List
Toogle List - Invalid

Wähle mindestens eine Operation aus

Container

Ohne Fehlermeldungen

Mit Fehlermeldung

Eine Fehlermeldung
Eine Fehlermeldung

Fieldset

Fieldset Standard

Legend

Hint Text 1

Hint Text 2

Fieldset Standard mit Fehlameldungen

Legend

Hint Text 1

Gültigen Text eingeben

Hint Text 2

Gültigen Text eingeben
Gültigen Text eingeben

Fieldset Inline

Zahlungsdaten

OSI Hilfe Dialog