Komponenten · Formulare
Mehrstufige Formulare & Wizards barrierefrei
Checkout, Registrierung, Antragsstrecke: Sobald ein Formular lang wird, teilt man es in Schritte – und genau an diesen Nahtstellen entstehen die Barrieren. Wo bin ich? Was kommt noch? Warum sind meine Eingaben weg? Ein barrierefreier Wizard beantwortet diese Fragen für alle Nutzer – und erfüllt nebenbei gleich mehrere WCAG-Kriterien, die WCAG 2.2 speziell für solche Strecken nachgeschärft hat.
Die Basis: jedes Einzelformular bleibt ein gutes Formular
Alles, was für Labels, Validierung und Fehlermeldungen gilt, gilt pro Schritt unverändert. Dazu kommen die Wizard-spezifischen Bausteine.
Baustein 1: Orientierung – Schritt-Anzeige und Titel
<head><title>Zahlung (Schritt 2 von 3) – Kasse | Beispiel-Shop</title></head>
…
<nav aria-label="Bestellschritte">
<ol class="steps">
<li><a href="/kasse/adresse.html">Adresse</a> <span class="visually-hidden">(abgeschlossen)</span></li>
<li aria-current="step">Zahlung</li>
<li aria-disabled="true">Prüfen & bestellen</li>
</ol>
</nav>
<main>
<h1>Schritt 2 von 3: Zahlung</h1>
…
</main>- Der Fortschritt steht dreifach da: im Seitentitel, in der Schrittliste (semantisch eine
<ol>– Reihenfolge ist Bedeutung) und in der<h1>. So bekommen ihn Sehende, Screenreader-Nutzer und Suchmaschinen gleichermaßen mit. - Der aktuelle Schritt trägt
aria-current="step"– dasselbe Muster wie bei Breadcrumbs. - Nur die Schritt-Zahl als Kreis-Grafik? Dann fehlt die Information allen, die nicht auf Optik zugreifen.
Baustein 2: Fokus-Führung beim Schrittwechsel
Bei klassischen Einzelseiten pro Schritt übernimmt der Browser das Nötige. Beim Single-Page-Wizard (Schritte werden per Skript getauscht) musst du den Fokus führen: Nach dem Wechsel gehört er auf die Überschrift des neuen Schritts –
const heading = schritt.querySelector('h2');
heading.setAttribute('tabindex', '-1');
heading.focus();– sonst steht er im Nichts, und der Screenreader schweigt zum Wechsel. Zusätzlich den Seitentitel aktualisieren.
Baustein 3: Eingaben bewahren – die 2.2-Pflichten
Zwei neue WCAG-2.2-Kriterien zielen direkt auf Wizards:
- 3.3.7 Redundante Eingabe: Was in Schritt 1 eingegeben wurde, wird später nicht noch einmal abgefragt – Klassiker: „Rechnungsadresse wie Lieferadresse“ als Checkbox statt Zweitformular.
- „Zurück“ ohne Datenverlust: Wer zurückblättert (oder von der Prüfen-Seite aus korrigiert), findet alle Eingaben wieder vor. Technisch: Zustand server- oder clientseitig halten, nie auf den Zufall des Browser-Caches bauen.
Dazu kommt 2.2.1: Session-Timeouts brauchen Vorwarnung und Verlängerung – mit Switch-Bedienung dauert ein Formular nun einmal länger.
Baustein 4: Fehler je Schritt, Abschluss mit Prüfseite
Validiert wird pro Schritt, mit Fehler-Zusammenfassung und Feld-Meldungen (3.3.1) – niemand soll in Schritt 4 erfahren, was in Schritt 1 falsch war. Vor dem verbindlichen Abschluss steht die Übersichtsseite mit „Ändern“-Links je Abschnitt – die 3.3.4-Pflicht und in deutschen Shops ohnehin rechtlicher Standard.
Randnotiz – ein Schritt pro Seite ist keine Schande. Die robusteste Wizard-Technik bleibt die klassische Seitenfolge: echte URLs, echter Browser-Zurück-Knopf, Fokus und Titel gratis. Single-Page-Wizards sparen einen Seitenwechsel und kosten dafür Fokus-Management, Titel-Pflege und Zustands-Logik in Eigenregie. Wer unsicher ist, wählt die Seitenfolge.
Häufige Fehler
- Fortschritt nur als Grafik ohne Text und
aria-current. - Fokus bleibt nach dem Wechsel stehen – der neue Schritt beginnt lautlos.
- „Zurück“ verwirft Eingaben – Verstoß gegen den Geist von 3.3.7 und der sichere Weg zum Abbruch.
- Timeout mitten im Schritt ohne Warnung und Verlängerung.
- Deaktivierter „Weiter“-Button ohne Erklärung – besser: aktiv lassen und beim Klick die konkreten Fehler benennen.
Häufige Fragen
Brauche ich eine Live-Region für den Schrittwechsel?
Wenn der Fokus sauber auf die neue Überschrift geführt wird, hört der Nutzer den Wechsel dadurch bereits. Eine zusätzliche Statusmeldung lohnt für Nebeninfos („Eingaben gespeichert“).
Wie viele Schritte sind okay?
So wenige wie möglich – jede zusätzliche Naht ist Abbruchrisiko. Faustregel: zusammengehörige Angaben (Adresse, Zahlung, Prüfen) bündeln statt jede Frage einzeln zu stellen; für kognitive Last zählt die Übersichtlichkeit innerhalb des Schritts mehr als die reine Schrittzahl.
Fazit
Ein barrierefreier Wizard ist Orientierung (Titel, Liste, Überschrift – dreifach), Fokus-Führung beim Wechsel, Fehler am Ort des Geschehens und Eingaben, die nichts vergessen. Die Messlatte liefern 3.3.7, 3.3.4 und 2.2.1; die Formular-Grundlagen stehen bei den Labels und der Validierung.