Mehrstufige Formulare barrierefrei nach BFSG: Lead-Strecken ohne Abbrueche

Fokus und Ankündigung beim Schrittwechsel

Wenn ein Formular vom ersten in den zweiten Schritt wechselt, entscheidet sich dort oft, ob Nutzer mit Screenreader oder Tastatur überhaupt merken, dass sich etwas verändert hat. Bleibt der Tastaturfokus auf dem alten "Weiter"-Button stehen, der jetzt unsichtbar oder ausgetauscht ist, verliert die Person die Orientierung und weiß nicht, wo sie sich im Formular befindet. Der Fokus sollte stattdessen aktiv auf die Überschrift oder das erste Eingabefeld des neuen Schritts gesetzt werden, sobald der Inhalt gewechselt hat.

Zusätzlich braucht der Wechsel eine Ankündigung, die auch ohne Sehen ankommt. Ein Bereich mit aria-live sorgt dafür, dass eine Meldung wie "Schritt 2 von 4, Lieferadresse" vom Screenreader vorgelesen wird, ohne dass die Seite neu geladen werden muss. Fehlt diese Ankündigung, bemerken viele Nutzer den Schrittwechsel erst, wenn sie zufällig weiterlesen und auf einmal neue, unbekannte Felder vorfinden.

Für Teams lohnt sich ein einfacher Test: Formular ausschließlich mit Tab und Screenreader durchgehen und nach jedem Klick auf "Weiter" prüfen, wo der Fokus tatsächlich landet. Landet er im Leeren, auf dem Seitenanfang oder bleibt er auf einem verschwundenen Element hängen, ist das ein klarer Befund, der sich meist mit wenigen Zeilen JavaScript beheben lässt.

Fehlermeldungen, die tatsächlich ankommen

Ein roter Rahmen um ein Feld reicht für viele Nutzer nicht aus, um einen Fehler zu erkennen. Wer mit Screenreader arbeitet, hört von der Farbe nichts, und wer stark vergrößert oder im Kontrastmodus surft, sieht den Rahmen möglicherweise gar nicht. Der Fehler muss deshalb auch als Text existieren, der eindeutig dem betroffenen Feld zugeordnet ist.

Bewährt hat sich eine Kombination aus zwei Elementen: eine Fehlerliste am Anfang des jeweiligen Schritts, die alle Probleme dieses Schritts aufzählt und per Link zum passenden Feld springt, sowie eine Einzelmeldung direkt am Feld selbst, die technisch mit dem Eingabefeld verknüpft ist. So findet die Person den Fehler, egal ob sie die Seite überfliegt oder sich Feld für Feld vorlesen lässt.

Wichtig ist außerdem der Zeitpunkt: Erscheint die Fehlermeldung erst nach dem Absenden des kompletten Formulars, muss die Person unter Umständen mehrere Schritte zurückgehen, um das betroffene Feld wiederzufinden. Eine Prüfung direkt beim Verlassen des Feldes oder beim Klick auf "Weiter" für den aktuellen Schritt spart diesen Umweg und verhindert, dass bereits eingegebene Daten beim Zurückspringen verloren gehen.

Zwischenspeichern und Zeitlimits ohne Datenverlust

Lange Formulare mit Session-Timeout sind für Menschen, die langsamer tippen, mehr Zeit zum Lesen brauchen oder zwischendurch unterbrochen werden, eine besondere Hürde. Läuft die Sitzung ab, während jemand noch beim dritten von fünf Schritten ist, sind oft alle bereits eingegebenen Daten weg, und die Person muss von vorne beginnen.

Sinnvoll ist deshalb eine Warnung vor Ablauf der Zeit, verbunden mit der Möglichkeit, die Sitzung mit einem Klick zu verlängern, statt kommentarlos auf die Startseite zu landen. Wo technisch möglich, hilft zusätzlich ein Zwischenspeichern der bereits ausgefüllten Felder, sodass ein versehentliches Neuladen oder ein Rücksprung im Browser nicht automatisch alle Angaben löscht.

Vor dem endgültigen Absenden sollte außerdem eine Übersichtsseite alle Eingaben aus sämtlichen Schritten zusammenfassen und bearbeitbar machen. Das gibt Nutzern die Möglichkeit, Fehler zu korrigieren, ohne den gesamten Ablauf erneut zu durchlaufen, und reduziert gleichzeitig die Zahl der Support-Anfragen wegen fehlerhaft übermittelter Formulare.

Tastatur- und Touch-Bedienung über den gesamten Ablauf

Ein mehrstufiges Formular ist nur dann tatsächlich nutzbar, wenn sich jeder Schritt vollständig mit der Tastatur bedienen lässt, von der ersten Eingabe bis zum finalen Absenden. Besonders Datumsauswahl, Adress-Autovervollständigung und eingebettete Zahlungsmasken bauen häufig eigene Tastaturlogik, die vom Rest des Formulars abweicht und Nutzer in einer Komponente gefangen hält, aus der sie mit Tab nicht mehr herauskommen.

Auf mobilen Geräten kommt eine zweite Ebene hinzu: Buttons für "Weiter", "Zurück" und "Absenden" brauchen ausreichend Abstand und Fläche, damit sie sich zuverlässig treffen lassen, auch wenn Tastatur und Formular gleichzeitig auf dem Bildschirm sichtbar sind. Rutscht der "Weiter"-Button beim Einblenden der virtuellen Tastatur aus dem sichtbaren Bereich, wird der gesamte Fortschritt unnötig erschwert.

Ein realistischer Test deckt beide Punkte ab: das komplette Formular einmal nur mit Tastatur, einmal nur mit Screenreader und einmal auf einem echten Smartphone mit eingeblendeter Tastatur durchklicken. Bleibt der Ablauf dabei an einer einzigen Stelle hängen, reicht das aus, um den gesamten Kanal für einen Teil der Nutzer unbrauchbar zu machen.

Automatisierte Tests und der manuelle Rest

Automatisierte Prüfwerkzeuge erkennen zuverlässig fehlende Labels, zu geringen Kontrast oder leere Buttons, sie können jedoch nicht beurteilen, ob der Fokus nach einem Schrittwechsel sinnvoll landet oder ob eine Ankündigung inhaltlich verständlich ist. Ein Formular kann jeden automatisierten Test bestehen und trotzdem für Screenreader-Nutzer unbenutzbar bleiben, weil genau diese dynamischen Abläufe nicht erfasst werden.

Deshalb gehört zu einer verlässlichen Prüfung immer ein manueller Durchlauf, bei dem eine Person den kompletten Formularprozess einmal nachstellt, wie ein echter Interessent das tun würde: mit realistischen Eingaben, absichtlichen Fehlern und einem Abbruch mittendrin, um zu sehen, ob der Wiedereinstieg funktioniert.

Wo möglich, liefert Feedback von Menschen, die dauerhaft mit Screenreader oder ausschließlich mit Tastatur arbeiten, die verlässlichsten Hinweise. Sie stoßen auf Probleme, die im internen Test oft übersehen werden, etwa weil das eigene Team unbewusst weiß, wie der Ablauf gemeint ist, und Umwege deshalb nicht als Hürde wahrnimmt. Ein solcher Testlauf lässt sich auch mit wenigen Personen und überschaubarem Aufwand organisieren und liefert dabei oft konkretere Hinweise als ein weiterer automatisierter Scan.

Häufig gestellte Fragen