Barrierefreie Formulare: Labels, Fehler und Tastatur

Was macht ein Formular barrierefrei?

Formulare sind oft der Punkt, an dem eine Website ihren Zweck erfüllt: Kontakt, Bestellung, Anmeldung, Antrag. Scheitert jemand hier, endet der ganze Ablauf. Gute Formulare helfen nicht nur Screenreader-Nutzern, sondern auch Menschen mit Lernschwierigkeiten, älteren Menschen und allen, die unterwegs auf dem Smartphone tippen.

Ein barrierefreies Formular hat sichtbare und technisch verknüpfte Beschriftungen, verständliche Anleitungen, hilfreiche Fehlermeldungen und ist vollständig per Tastatur bedienbar. In WCAG betrifft das vor allem die Kriterien 1.3.1 (Struktur), 2.1.1 (Tastatur), 3.3.1 bis 3.3.3 (Fehler, Beschriftungen, Korrekturvorschläge) und 4.1.2 (Name, Rolle, Wert).

Wie beschrifte ich Formularfelder richtig?

Verknüpfe jedes Eingabefeld mit einem label über passende for- und id-Werte, etwa <label for="email">E-Mail-Adresse</label> und <input id="email" type="email">. Dann liest der Screenreader die Beschriftung vor, und ein Klick auf das Label setzt den Fokus ins Feld.

Ein Platzhalter verschwindet beim Tippen und ist kein Ersatz. Die Beschriftung soll außerdem das Wort enthalten, das sichtbar ist. Wer mit Sprachsteuerung „Klick E-Mail-Adresse“ sagt, muss das Feld so erreichen. Auch Buttons brauchen einen klaren Text wie „Nachricht senden“ statt nur eines Pfeils.

Soll ein sichtbares Label aus Designgründen fehlen, etwa beim Suchfeld mit Lupe, braucht das Feld trotzdem einen zugänglichen Namen, zum Beispiel über ein visuell verstecktes Label oder aria-label. Ein sichtbarer Text bleibt die bessere Lösung, weil er allen hilft. Bei Textfeldern steht das Label meist darüber oder links, bei Checkboxen und Radiobuttons rechts daneben.

Wie kennzeichne ich Pflichtfelder?

Erkläre zu Beginn, wie du Pflichtfelder markierst, etwa „Felder mit * sind Pflichtfelder“. Noch eindeutiger ist der Zusatz „(Pflichtfeld)“ im Label. Das HTML-Attribut required gibt die Information zusätzlich an unterstützende Technologien weiter.

Kennzeichne Pflichtfelder nicht nur durch Farbe. Nenne erwartete Formate vor der Eingabe, zum Beispiel „Datum im Format TT.MM.JJJJ“. Frage nur Angaben ab, die dein Prozess wirklich benötigt. Sind fast alle Felder Pflicht, markierst du besser die wenigen optionalen mit „(optional)“.

Wann brauche ich fieldset und legend?

Wenn mehrere Felder zusammengehören, gruppierst du sie mit fieldset und gibst der Gruppe mit legend eine Überschrift. Typisch sind Radiobuttons wie „Bevorzugte Kontaktart: Telefon, E-Mail“ oder Checkbox-Gruppen.

Ohne Gruppenbezeichnung hört jemand mit Screenreader nur „Telefon, Optionsfeld“ und weiß nicht, worauf sich die Frage bezieht. Auch Adressblöcke wie Liefer- und Rechnungsadresse werden durch Gruppen verständlicher. Verschachtele Gruppen aber nicht unnötig, denn manche Screenreader lesen die Gruppenbezeichnung bei jedem Feld mit vor.

Wie formuliere ich hilfreiche Fehlermeldungen?

Prüfe Eingaben beim Absenden oder beim Verlassen eines Feldes, nicht bei jedem Tastendruck. Meldungen, die schon während des Tippens erscheinen, unterbrechen Screenreader-Nutzer ständig. Setze nach dem Absenden den Fokus auf die Fehlerzusammenfassung oder das erste fehlerhafte Feld, damit niemand suchen muss.

1. 1Benenne das betroffene Feld und die konkrete Ursache: „Die E-Mail-Adresse enthält kein @-Zeichen.“
2. 2Beschreibe eine mögliche Korrektur, etwa das erwartete Datumsformat.
3. 3Kennzeichne Fehler mit Text und nicht ausschließlich mit roter Farbe.
4. 4Verbinde Fehlertexte und ergänzende Hinweise technisch mit dem Feld, zum Beispiel über aria-describedby.
5. 5Bei mehreren Fehlern hilft eine Zusammenfassung über dem Formular mit Links zu den Feldern.
6. 6Erhalte bereits eingegebene Daten, soweit der Ablauf dies zulässt.
7. 7Kündige Statusmeldungen wie „Nachricht gesendet“ so an, dass Screenreader sie vorlesen, ohne den Fokus zu verschieben (WCAG 4.1.3).

Wie hilft autocomplete beim Ausfüllen?

Mit dem Attribut autocomplete sagst du dem Browser, welche Angabe ein Feld erwartet, etwa autocomplete="name", "email" oder "postal-code". WCAG 1.3.5 verlangt auf Stufe AA, dass der Zweck solcher Felder für Angaben zur Person technisch erkennbar ist.

Der Browser kann die Felder dann automatisch füllen. Das spart Tipparbeit und hilft Menschen mit motorischen oder kognitiven Einschränkungen. Passend dazu verlangt WCAG 2.2 im Kriterium 3.3.7, dass Angaben, die im selben Ablauf schon gemacht wurden, nicht erneut eingetippt werden müssen. Unterbinde das automatische Ausfüllen nicht ohne Grund mit autocomplete="off".

Was gilt für Zeitlimits, CAPTCHAs und Anmeldung?

Läuft ein Formular nach einer Zeit ab, müssen Nutzer das Limit in der Regel abschalten, anpassen oder verlängern können (WCAG 2.2.1). Sonst verliert gerade wer langsamer tippt seine Eingaben. Nenne vorher, wie viel Zeit zur Verfügung steht.

Bei der Anmeldung verbietet WCAG 3.3.8 kognitive Funktionstests wie Rätsel oder das Abtippen verzerrter Zeichen, wenn es keine Alternative oder Hilfe gibt. Erlaube das Einfügen von Passwörtern und die Nutzung von Passwortmanagern. Lange Formulare teilst du in Schritte und zeigst den Fortschritt an.

Bei Bestellungen und anderen Eingaben mit rechtlichen oder finanziellen Folgen verlangt WCAG 3.3.4, dass sich die Übermittlung zurücknehmen lässt, Eingaben geprüft werden oder eine Übersicht vor dem Absenden eine Korrektur erlaubt.

Wie teste ich ein Formular?

Erreiche die Felder und den Absende-Button mit der Tastatur. Sende absichtlich unvollständige Angaben und korrigiere den Fehler. Prüfe anschließend, ob eine Erfolgsmeldung erkennbar ist. Beziehe auch dynamisch eingeblendete Felder ein und wiederhole den Ablauf mit einem Screenreader. Achte darauf, dass die Fokusreihenfolge der sichtbaren Reihenfolge folgt, besonders bei zweispaltigen Formularen.

Der Accessonaut-Check findet unter anderem unbeschriftete Formularfelder automatisch. Ob Anleitungen und Fehlermeldungen verständlich sind, bewertet er nicht; dafür brauchst du den manuellen Durchlauf.

Prüfe zusätzlich bei 200 Prozent Vergrößerung, ob Beschriftungen und Fehlermeldungen neben ihren Feldern sichtbar bleiben. Auf dem Smartphone helfen passende Eingabetypen wie type="email" oder type="tel", weil die Bildschirmtastatur dann die richtigen Zeichen anbietet.