Was macht ein Formular barrierefrei?
Kurzantwort: Jedes Eingabefeld braucht einen verständlichen, programmatisch verbundenen Namen. Hinweise und Fehler müssen als Text verfügbar, dem richtigen Feld zugeordnet und ohne Farbe allein erkennbar sein. Nach einem fehlgeschlagenen Absenden sollte der Fokus zur Fehlermeldung oder zum ersten ungültigen Feld gelangen.
Ein sichtbarer Platzhalter ist kein Ersatz für ein Label: Er verschwindet bei der Eingabe, wird uneinheitlich vorgelesen und erklärt selten das erwartete Format.
Labels direkt mit Feldern verbinden
Problematisch
<span>E-Mail-Adresse</span>
<input type="email" placeholder="name@firma.de">Der sichtbare Text ist technisch nicht mit dem Eingabefeld verbunden.
Besser
<label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email" autocomplete="email" required>Das for-Attribut verweist auf die eindeutige id des Feldes. Dadurch lässt sich das Feld auch durch einen Klick auf das Label aktivieren. Verwenden Sie native HTML-Elemente, bevor Sie ARIA ergänzen.
Hinweise und Formate verständlich angeben
Wenn eine Eingabe ein bestimmtes Format verlangt, muss die Information vor dem Fehler verfügbar sein. Mit aria-describedby wird der Hinweis zusätzlich zum Namen vorgelesen.
<label for="date">Gewünschter Termin</label>
<p id="date-hint">Format: TT.MM.JJJJ</p>
<input id="date" name="date" inputmode="numeric" aria-describedby="date-hint">Ein Sternchen allein erklärt nicht zuverlässig, dass ein Feld verpflichtend ist. Schreiben Sie „Pflichtfeld“ sichtbar aus oder erklären Sie das Symbol am Anfang des Formulars. Das native required übermittelt den Status an unterstützende Technologien.
Fehler am betroffenen Feld ausgeben
Eine allgemeine Meldung wie „Ihre Eingabe ist ungültig“ reicht nicht. Nennen Sie das Feld, das Problem und möglichst die Korrektur.
<label for="email">E-Mail-Adresse</label>
<input
id="email"
name="email"
type="email"
aria-invalid="true"
aria-describedby="email-error"
>
<p id="email-error">Geben Sie eine vollständige Adresse ein, zum Beispiel name@firma.de.</p>Setzen Sie aria-invalid="true" erst, nachdem die Eingabe geprüft wurde. Entfernen Sie das Attribut wieder, sobald der Fehler korrigiert ist. Wird die Fehlermeldung dynamisch eingefügt, kann ein übergeordneter Statusbereich mit aria-live="polite" die Änderung ankündigen. Vermeiden Sie mehrere konkurrierende Live-Regionen.
Fokus nach dem Absenden steuern
Nach einem fehlgeschlagenen Absenden gibt es zwei robuste Muster:
- Fokus auf eine Fehlerzusammenfassung am Formularanfang setzen. Jeder Eintrag verlinkt zum betroffenen Feld.
- Bei kurzen Formularen direkt das erste ungültige Feld fokussieren.
Die Fehlerzusammenfassung benötigt tabindex="-1", wenn ein normalerweise nicht fokussierbares Element den programmatischen Fokus erhalten soll. Verschieben Sie den Fokus nur nach einer Aktion der Nutzerin oder des Nutzers, nicht überraschend während der Eingabe.
Gruppen korrekt auszeichnen
Zusammengehörige Auswahlfelder werden mit fieldset und legend gruppiert:
<fieldset>
<legend>Bevorzugte Kontaktart</legend>
<label><input type="radio" name="contact" value="email"> E-Mail</label>
<label><input type="radio" name="contact" value="phone"> Telefon</label>
</fieldset>Die Legende gibt der gesamten Gruppe einen Namen. Das ist besonders bei mehreren ähnlichen Radio- oder Checkbox-Gruppen entscheidend.
Manueller Formular-Test
- Füllen Sie das Formular nur mit der Tastatur aus.
- Prüfen Sie, ob jedes Feld einen verständlichen Namen besitzt.
- Senden Sie leer und mit bewusst falschen Formaten ab.
- Kontrollieren Sie, ob Fehler ohne Farbe erkennbar und am Feld erklärt sind.
- Korrigieren Sie einen Fehler und prüfen Sie, ob sein Fehlerstatus verschwindet.
- Testen Sie Autovervollständigung für persönliche Daten.
Der interaktive WCAG-Schnellcheck hilft beim Dokumentieren. Ein automatischer Scan kann fehlende Labels erkennen, nicht aber zuverlässig beurteilen, ob Beschriftungen und Fehlermeldungen verständlich sind.
Quellen und weiterführende Standards
Stand: 7. August 2026.