Was sind barrierefreie Formulare?

Was sind barrierefreie Formulare?

Ein barrierefreies Formular können alle verstehen, bedienen und ausfüllen, auch Menschen mit Tastatur, Screenreader, Sprachsteuerung, Zoom oder Schaltersteuerung. In der Praxis heißt das: Jedes Feld hat ein programmatisches Label, zusammengehörige Felder sind gruppiert, Fehler werden im Text benannt und mit Lösungsvorschlag versehen, und das ganze Formular funktioniert ohne Maus.

Worauf es ankommt

• Labels. Nutze ein echtes label-Element, per for und id mit dem Eingabefeld verbunden. WCAG 3.3.2 (Stufe A) verlangt Beschriftungen oder Anweisungen, sobald Inhalt Eingaben annimmt, und 1.3.1 (Stufe A) verlangt, dass die Beziehung programmatisch ermittelbar ist. Ein Platzhalter ist kein Label: Er verschwindet, sobald getippt wird.
• Gruppierung. Fasse zusammengehörige Elemente wie Radiobuttons in fieldset mit legend zusammen, wie es die W3C-Techniken zu 1.3.1 beschreiben.
• Zweck der Eingabe. Setze den passenden autocomplete-Wert (given-name, email, tel), damit Browser und Hilfstechnologien wissen, was ein Feld abfragt (1.3.5, Stufe AA).
• Fehler. Benenne das fehlerhafte Feld und beschreibe das Problem im Text (3.3.1, Stufe A) und biete einen Korrekturvorschlag an, wenn einer bekannt ist (3.3.3, Stufe AA). Farbe allein genügt nicht.
• Keine doppelte Eingabe. Bereits eingegebene Informationen im selben Ablauf sollten vorausgefüllt oder auswählbar sein (3.3.7 Redundante Eingabe, Stufe A, neu in WCAG 2.2).
• Anmeldung. Blockiere weder Einfügen noch Passwortmanager: 3.3.8 Barrierefreie Authentifizierung (Stufe AA) sieht es als Hürde, wenn man sich ein Passwort merken oder abtippen muss, ohne dass es eine Alternative gibt.
• Name, Rolle, Wert. Eigene Bedienelemente müssen Name, Rolle und Zustand an Hilfstechnologien weitergeben (4.1.2, Stufe A). Siehe eigene Eingabekomponenten und ARIA, und bevorzuge zuerst native Elemente.

Beispiel

<label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email"
       autocomplete="email" aria-describedby="email-err">
<p id="email-err">Gib eine Adresse wie name@beispiel.de ein</p>

Das Label wird mit dem Feld vorgelesen, der Hinweis über aria-describedby, und der Browser kann automatisch ausfüllen. Achte darauf, dass alle Elemente erreichbar und logisch geordnet sind: siehe Reihenfolge der Tastaturnavigation.

Häufige Fehler

• Platzhaltertext als einziges Label.
• Eine Fehlermeldung wie „Ungültige Eingabe“, die weder das Feld nennt noch sagt, wie man es behebt, oder ein roter Rahmen ohne Text.
• Pflichtfelder, die nur durch Farbe markiert sind.
• Deaktiviertes Einfügen in Passwort- oder E-Mail-Bestätigungsfeldern.
• Eigene Dropdowns und Datumsauswahlen aus div-Elementen ohne Tastaturbedienung oder Rolle.

Testen und überwachen

Automatisiertes Barrierefreiheitstesten erkennt fehlende Labels und Namen zuverlässig und eignet sich daher gut als Regressionsprüfung für Formulare. Ob eine Fehlermeldung verständlich oder die Tab-Reihenfolge logisch ist, kann es nicht beurteilen: Gehe das Formular auch mit der Tab-Taste und einem Screenreader durch. Den größeren Rahmen bildet WCAG. LoadFocus Page-Speed-Monitoring erfasst die Lighthouse-Kategorie Barrierefreiheit regelmäßig für die Seiten mit deinen Formularen, sodass ein Rückgang als Trend sichtbar wird. Es ist ein Monitoring, kein Barrierefreiheits-Audit. Tools findest du in diesem Überblick über Tools für Barrierefreiheitstests.

Häufige Fragen: Barrierefreie Formulare

Reicht ein Platzhalter als Label?

Nein. Platzhalter verschwinden beim Tippen, haben oft zu wenig Kontrast und sind kein verlässlicher zugänglicher Name. Nutze ein sichtbares Label-Element.

Welche WCAG-Kriterien gelten für Formulare?

Vor allem 1.3.1, 1.3.5, 3.3.1, 3.3.2, 3.3.3, 3.3.7, 3.3.8 und 4.1.2, dazu Tastaturbedienung (2.1.1) und sichtbarer Fokus.

Soll ich ARIA in Formularen einsetzen?

Nur, wo natives HTML nicht reicht. Ein natives Label, fieldset und input liefern bereits Name, Rolle und Zustand. ARIA brauchst du für eigene Widgets und um Hinweise und Fehler mit Feldern zu verknüpfen.

Wie zeige ich Fehler an?

Benenne im Text das betroffene Feld und die Lösung, platziere die Meldung neben dem Feld und setze nach einem fehlgeschlagenen Absenden den Fokus auf eine Fehlerübersicht oder das erste ungültige Feld.

Kann ein Tool die Barrierefreiheit eines Formulars prüfen?

Es findet fehlende Labels und Namen, aber keine unklaren Formulierungen oder verwirrende Reihenfolgen. Kombiniere es mit manuellen Tastatur- und Screenreader-Tests.