Formulare, die Menschen ausfüllen können

Über Formulare erledigen Bürgerinnen und Bürger ihre Anliegen: eine Genehmigung beantragen, sich für ein Angebot anmelden, ein Schlagloch melden, Akteneinsicht beantragen. Ein Formular, das mit einem Screenreader, einer Tastatur oder einem Telefon nicht funktioniert, ist ein geschlossener Schalter.

Viele Formularprobleme werden von Entwicklerinnen und Entwicklern in die Website eingebaut. Redaktionen fügen heute häufiger Formulare hinzu als früher, über Formular-Builder in WordPress, Drupal und Online-Formulardiensten. Diese Lektion behandelt, was Sie selbst steuern.

Jedes Feld braucht eine sichtbare Beschriftung

Eine Beschriftung ist der Text, der ein Feld benennt: „Vorname“, „Straße und Hausnummer“, „Geburtsdatum“. Sie muss sichtbar und mit ihrem Feld verbunden sein, damit ein Screenreader sie ansagt, wenn das Feld ausgewählt wird. Formular-Builder stellen diese Verbindung her, wenn Sie ihre Einstellung für die Beschriftung verwenden.

In der WebAIM Million 2026 hatten 51 Prozent der eine Million wichtigsten Startseiten Formularfelder ohne Beschriftung.

Platzhaltertext ist keine Beschriftung. Der graue Hinweis in einem leeren Feld verschwindet, sobald jemand tippt, ist oft zu blass zum Lesen und wird nicht zuverlässig angesagt. Verwenden Sie eine echte Beschriftung; nutzen Sie den Platzhalter höchstens für ein Beispiel.

Hinweise vor dem Feld

Stellen Sie das, was Menschen wissen müssen, an den Anfang:

• das Format: „Geburtsdatum (TT.MM.JJJJ)“
• die Grenzen: „Laden Sie ein Foto hoch, JPG oder PNG, bis 5 MB“
• was bereitliegen sollte, oben im Formular: „Sie benötigen Ihre Kundennummer von Ihrer Wasserrechnung.“

Hinweise, die erst nach einem Fehler erscheinen, lassen Menschen zuerst scheitern.

Pflichtfelder in Worten

Kennzeichnen Sie Pflichtfelder mit dem Wort „Pflichtfeld“ in der Beschriftung, oder erklären Sie ein Symbol einmal oben: „Mit * gekennzeichnete Felder sind Pflichtfelder.“ Kennzeichnen Sie sie nie nur durch Farbe. Lektion 5 erklärt, warum.

Noch besser: Fragen Sie nur ab, was Sie brauchen. Jedes optionale Feld, das Sie entfernen, ist eine Gelegenheit weniger, hängen zu bleiben.

Fehler, die sagen, wie man sie behebt

WCAG 2.1 verlangt, dass Fehler in Textform benannt werden und das Formular, wo möglich, eine Korrektur vorschlägt. In den meisten Formular-Buildern können Sie Fehlermeldungen bearbeiten. Lassen Sie jede das Feld und die Korrektur nennen:

• Statt „Ungültige Eingabe“ schreiben Sie „Geben Sie Ihre Telefonnummer mit Vorwahl ein, zum Beispiel 703-555-0100.“
• Statt „Fehler“ schreiben Sie „Wählen Sie einen Abholtermin.“

Behalten Sie bei, was die Person bereits eingegeben hat, wenn das Formular Fehler anzeigt. Wer von vorn anfangen muss, gibt häufig auf.

Zusammengehörige Fragen gruppieren

Eine Frage mit mehreren Auswahlmöglichkeiten, etwa „An welchen Tagen können Sie ehrenamtlich helfen?“, sollte eine Gruppe sein, deren eigene Frage als Beschriftung der Gruppe dient. Formular-Builder tun das bei Optionsfeldern und Kontrollkästchen meist, wenn Sie ihre Einstellung „Frage“ oder „Legende“ verwenden statt einer separaten Textzeile.

Testen wie eine Bürgerin oder ein Bürger

Bevor Sie ein Formular veröffentlichen, füllen Sie es zweimal aus:

1. Nur mit der Tastatur. Die Tabulatortaste wechselt zwischen Feldern, die Leertaste setzt Häkchen, die Pfeiltasten wechseln zwischen Optionsfeldern, die Eingabetaste sendet ab. Wenn Sie hängen bleiben, bleiben andere es auch.
2. Auf Ihrem Telefon. Prüfen Sie, dass die Beschriftungen sichtbar sind, die Tastatur zum Feld passt (Ziffern für eine Telefonnummer) und die Schaltfläche zum Absenden erreichbar ist.

Senden Sie es dann absichtlich mit einem Fehler ab und lesen Sie die Fehlermeldung.