Barrierefreie Formulare erstellen

Warum Formulare besonders kritisch sind

44,6% aller Websites haben Formularfelder ohne zugeordnete Labels - das ist der vierthäufigste Barrierefreiheitsfehler (Quelle: WebAIM Million 2026). Für Online-Shops ist das besonders relevant: Wenn der Checkout nicht barrierefrei ist, ist der gesamte Kaufprozess nicht BFSG-konform - egal wie gut der Rest der Website ist.

Labels: Die Grundregel

Jedes Eingabefeld braucht ein sichtbares Label, das programmatisch mit dem Feld verknüpft ist (WCAG 1.3.1, 3.3.2). Das bedeutet: Ein <label>-Element mit einem for-Attribut das auf die id des Feldes zeigt (Quelle: barrierefreies-webdesign.de).

<!-- Richtig -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email">

<!-- Falsch: Placeholder ist kein Label -->
<input type="email" placeholder="E-Mail-Adresse">

<!-- Falsch: Label ohne for -->
<label>E-Mail</label>
<input type="email">

Pflichtfelder kennzeichnen

Pflichtfelder müssen klar erkennbar sein - und zwar nicht nur visuell. WCAG 1.3.1 fordert, dass die Information programmatisch verfügbar ist (Quelle: ifdb-barrierefreiheit.de):

<label for="name">
  Name <span aria-hidden="true">*</span>
</label>
<input type="text" id="name" required
       aria-required="true">

<!-- Legende am Anfang des Formulars: -->
<p>Alle mit * gekennzeichneten Felder
   sind Pflichtfelder.</p>

Das required-Attribut sorgt für Browser-seitige Validierung, aria-required="true" informiert Screenreader. Die Legende am Anfang erklärt die Stern-Konvention.

Fehlermeldungen

WCAG 3.3.1 fordert: Wenn ein Fehler erkannt wird, muss er identifiziert und dem Nutzer in Textform beschrieben werden. WCAG 3.3.3 (AA) fordert zusätzlich: Die Fehlermeldung muss einen Korrekturvorschlag enthalten (Quelle: gehirngerecht.digital).

Fehler nicht nur durch Farbe

Ein rot umrandetes Feld allein reicht nicht (WCAG 1.4.1). Ergänzen Sie immer einen Fehlertext und ein Symbol. Farbenblinde Nutzer sehen den roten Rand möglicherweise nicht.

Fehler beim Feld anzeigen

Zeigen Sie die Fehlermeldung direkt beim betroffenen Feld an, nicht nur in einer Zusammenfassung oben. Der Nutzer muss nicht suchen wo der Fehler ist.

Fokus auf den Fehler setzen

Nach dem Absenden eines fehlerhaften Formulars sollte der Fokus auf die Fehlerzusammenfassung oder das erste fehlerhafte Feld springen. Verwenden Sie role="alert" oder aria-live="polite" damit Screenreader die Meldung ankündigen.

Autocomplete nutzen

WCAG 1.3.5 (AA) fordert: Eingabefelder für persönliche Daten müssen ein passendes autocomplete-Attribut haben. Das hilft Nutzern mit motorischen oder kognitiven Einschränkungen, bereits gespeicherte Daten automatisch einzufüllen.

<input type="text" autocomplete="name">
<input type="email" autocomplete="email">
<input type="tel" autocomplete="tel">
<input type="text" autocomplete="street-address">
<input type="text" autocomplete="postal-code">
<input type="text" autocomplete="address-level2">

Gruppierung mit Fieldset

Zusammengehörende Felder (z.B. Adressdaten, Zahlungsdaten) sollten mit <fieldset> und <legend> gruppiert werden. Das gibt Screenreader-Nutzern Kontext.

<fieldset>
  <legend>Lieferadresse</legend>
  <label for="strasse">Straße</label>
  <input type="text" id="strasse"
         autocomplete="street-address">
  ...
</fieldset>

Keine doppelte Dateneingabe (WCAG 3.3.7, neu in 2.2)

In mehrstufigen Prozessen dürfen bereits eingegebene Daten nicht erneut abgefragt werden. Wenn der Nutzer im Schritt 1 seine Adresse eingegeben hat, muss sie in Schritt 3 vorausgefüllt sein. Ausnahme: Sicherheitsrelevante erneute Eingaben (z.B. Passwortbestätigung). Mehr dazu: Was ist neu in WCAG 2.2.

Checkliste für barrierefreie Formulare

• Jedes Feld hat ein sichtbares <label> mit for
• Pflichtfelder mit required und visueller Kennzeichnung
• Fehlermeldungen sind konkret, verständlich und beim Feld platziert
• Fehler nicht nur durch Farbe gekennzeichnet
• Fokus springt nach Absenden auf Erfolgs- oder Fehlermeldung
• Alle Felder per Tastatur erreichbar und bedienbar
• autocomplete-Attribute für persönliche Daten
• Zusammengehörende Felder mit fieldset/legend gruppiert
• Keine erneute Eingabe bereits bekannter Daten
• Kein CAPTCHA ohne barrierefreie Alternative