1. Was ist das Ziel dieses Kriteriums?
Ein Dropdown-Menü öffnet sich wie ein Zaubertrick – du wählst einen Eintrag aus und plötzlich springst du auf eine völlig andere Seite. Oder ein Formular verschwindet beim ersten Anklicken eines Radiobuttons. Solche überraschenden Sprünge können frustrierend sein – besonders für Menschen, die sich schwerer orientieren oder Veränderungen nicht sofort bemerken.
Das Ziel von Erfolgskriterium 3.2.2 der WCAG ist es deshalb, dass Eingabefelder und Bedienelemente vorhersehbar reagieren. Nutzer sollen nicht unvorbereitet in neue Kontexte katapultiert werden, nur weil sie ein Formularfeld ausgefüllt oder eine Auswahl getroffen haben.
Kurz gesagt: Was passiert, wenn ich etwas eingebe oder auswähle, sollte erwartbar sein – oder zumindest vorher angekündigt werden.
2. Was fordert das Erfolgskriterium genau?
Das Kriterium ist Level A und bezieht sich auf alle Benutzeroberflächen-Komponenten, die Eingaben enthalten oder deren Status verändert werden kann:
Keine automatischen Kontextänderungen ohne Vorwarnung:
- Ein Dropdown darf nicht automatisch zu einer neuen Seite weiterleiten, sobald ein Wert ausgewählt wird
- Ein Formular darf sich nicht automatisch absenden, wenn das letzte Feld ausgefüllt wird
- Radiobuttons oder Checkboxen dürfen nicht unangekündigt neue Fenster öffnen
Ausnahme: Vorherige Information: Wenn eine Eingabe automatisch eine Kontextänderung auslöst, muss der Nutzer darüber informiert werden, bevor er das Element verwendet.
Was ist eine Kontextänderung?
- Wechsel zu einer anderen Seite oder Website
- Öffnen eines neuen Fensters oder Tabs
- Sprung zu einem anderen Bereich der Seite
- Grundlegende Änderung des Inhalts, die die Bedeutung der Seite verändert
Was zählt nicht als Kontextänderung:
- Erweitern/Einklappen von Menüs oder Bereichen
- Dynamisches Hinzufügen von Formularfeldern auf derselben Seite
- Aktualisierung von Inhalten ohne Fokus- oder Seitenwechsel
3. Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du nutzt einen Screenreader und wählst in einem Dropdown „Deutschland" aus – und landest plötzlich auf der deutschen Version der Website, ohne es zu bemerken. Oder du verwendest eine Bildschirmlupe und ein Formular springt zu einem anderen Bereich, den du nicht siehst.
Vorhersehbare Eingabeverhalten schaffen Barrierefreiheit, weil sie:
- Blinden und sehbehinderten Nutzern Orientierung geben, die Kontextänderungen nicht sofort visuell erfassen können
- Menschen mit kognitiven Einschränkungen helfen, die durch unerwartete Änderungen verwirrt werden können
- Nutzern mit motorischen Einschränkungen ermöglichen, versehentliche Aktivierungen zu vermeiden
- Nutzer mit Aufmerksamkeitsstörungen dabei unterstützen, den Überblick zu behalten
- Allen Nutzern eine verlässliche und intuitive Bedienung bieten
Vorhersehbarkeit ist ein Grundpfeiler der Barrierefreiheit – besonders für Menschen, die auf assistive Technologien angewiesen sind.
4. So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Die meisten modernen Webstandards folgen bereits den Prinzipien vorhersehbarer Bedienung. Hier die wichtigsten Praxis-Tipps:
Grundregeln für Formularelemente:
- Verwende Submit-Buttons für das Absenden von Formularen – niemals automatisches Absenden
- Dropdown-Menüs sollen zur Auswahl dienen, nicht zur Navigation
- Erkläre ungewöhnliches Verhalten vorab: „Auswahl führt automatisch zur nächsten Seite"
- Nutze ARIA-Labels oder Beschreibungen für komplexere Interaktionen
Do's:
- Submit-Button verwenden: „Suchen", „Absenden", „Weiter" – klare Aktions-Buttons
- Vorab informieren: „Nach Auswahl werden weitere Felder angezeigt"
- Erwartungen setzen: „Klicken Sie ‚Speichern', um fortzufahren"
- Progressive Disclosure: Schrittweise Anzeige zusätzlicher Inhalte
Don'ts:
- Auto-Submit vermeiden: Formulare nicht beim letzten Feld automatisch absenden
- Auto-Navigation stoppen: Dropdown-Auswahl soll nicht zu neuen Seiten führen
- Unangekündigte Pop-ups: Keine Fenster ohne Vorwarnung öffnen
- Fokus-Hijacking: Den Fokus nicht unvorbereitet versetzen
Technische Umsetzung:
- JavaScript:
onchange-Events nutzen, um Inhalte zu erweitern, nicht um Seiten zu wechseln - HTML:
<button type="submit">für Formular-Übertragungen verwenden - ARIA:
aria-describedbyfür Erklärungen komplexer Verhaltensweisen - CSS: Visuelle Hinweise auf interaktive Elemente
5. Warum dieses Erfolgskriterium für Unternehmen relevant ist
Vorhersehbare Benutzerführung ist nicht nur eine Frage der Barrierefreiheit – sie ist ein echter Wettbewerbsvorteil für dein Business.
1. Conversion-Rate verbessern Nutzer, die sich sicher und orientiert fühlen, brechen Prozesse seltener ab. Vorhersehbare Formulare und Eingabefelder reduzieren Frustration und erhöhen die Wahrscheinlichkeit erfolgreicher Transaktionen – von Anmeldungen bis zu Käufen.
2. Nutzerfreundlichkeit steigern Niemand mag Überraschungen beim Ausfüllen von Formularen. Klare, erwartbare Interaktionen verbessern die User Experience für alle – von tech-affinen Millennials bis zu weniger erfahrenen Internetnutzern.
3. Support-Anfragen reduzieren Wenn Nutzer verstehen, was passiert, wenn sie auf etwas klicken, sinkt die Zahl verwirrter Support-Anfragen. „Warum bin ich plötzlich auf einer anderen Seite?" oder „Das Formular ist einfach verschwunden" gehören der Vergangenheit an.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
6. Das Erfolgskriterium im Wortlaut der W3C
Success Criterion 3.2.2 On Input (Level A)
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.