--- title: "Bei Eingabe" url: "https://barrierefreihochzwei.de/de/wcag/3-2-2-bei-eingabe" language: "de" description: "WCAG 3.2.2 verlangt, dass Eingaben und Auswahlen keine unangekündigten Kontextwechsel auslösen – hier lernst du, worauf es bei Formularen ankommt." published: "2025-01-01T08:00:00+01:00" updated: "2026-10-15T09:42:00+02:00" --- # Bei Eingabe Wenn Formulare unvorhersehbar werden. - **Erfolgskriterium:** 3.2.2 - **Prinzip:** Verständlich - **Konformitätsstufe:** Level A - **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/on-i...](https://www.w3.org/WAI/WCAG22/Understanding/on-input.html) Erfolgskriterium 3.2.2 # 3.2.2 Bei Eingabe Level AVerständlich Wenn Formulare unvorhersehbar werden. ## 1. Was ist das Ziel dieses Kriteriums? Ein Auswahlmenü funktioniert wie ein Zaubertrick: Du wählst einen Eintrag aus und plötzlich bist du auf einer völlig anderen Seite. Oder ein Formular verschwindet, sobald du den ersten Radiobutton anklickst. Solche überraschenden Sprünge sind frustrierend – besonders für Menschen, die sich schwerer orientieren oder Veränderungen nicht sofort bemerken. Das Ziel von Erfolgskriterium 3.2.2 der WCAG ist deshalb, dass Eingabefelder und Bedienelemente vorhersehbar reagieren. Niemand soll unvorbereitet in einen neuen Kontext katapultiert werden, nur weil er ein Formularfeld ausgefüllt oder eine Auswahl getroffen hat. Kurz gesagt: Was passiert, wenn ich etwas eingebe oder auswähle, sollte erwartbar sein – oder vorher angekündigt werden. ## 2. Was fordert das Erfolgskriterium genau? Das Kriterium ist Level A und bezieht sich auf alle Bedienkomponenten, deren Einstellung du ändern kannst – Textfelder, Auswahllisten, Checkboxen, Radiobuttons, Schieberegler und Ähnliches. **Keine automatischen Kontextänderungen** ohne vorherigen Hinweis: - Eine Auswahlliste 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:** Löst eine Eingabe doch automatisch eine Kontextänderung aus, müssen Nutzer:innen darüber informiert werden, bevor sie das Element verwenden. **Was ist eine Kontextänderung?** - Wechsel zu einer anderen Seite oder Website - Öffnen eines neuen Fensters oder Tabs - Verschieben des Fokus auf ein anderes Element oder einen anderen Bereich der Seite - Grundlegende Änderung des Inhalts, die die Bedeutung der Seite verändert **Was nicht als Kontextänderung zählt:** - Auf- und Zuklappen von Menüs oder Bereichen - Dynamisches Einblenden zusätzlicher Formularfelder auf derselben Seite – idealerweise direkt nach dem auslösenden Element - 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 einer Auswahlliste „Deutschland“ aus – und landest plötzlich auf der deutschen Version der Website, ohne es zu bemerken. Oder du verwendest eine Bildschirmlupe, und das Formular springt zu einem Bereich, den du gerade nicht siehst. Vorhersehbares Eingabeverhalten schafft Barrierefreiheit, weil es: - **blinden und sehbehinderten Menschen** Orientierung gibt, die Kontextänderungen nicht sofort visuell erfassen können - **Menschen mit kognitiven Einschränkungen** hilft, die durch unerwartete Änderungen verwirrt werden können - **Menschen mit motorischen Einschränkungen** vor den Folgen versehentlicher Auswahlen schützt - **Menschen mit Aufmerksamkeitsstörungen** dabei unterstützt, den Überblick zu behalten - **allen** eine verlässliche und intuitive Bedienung bietet 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: Standard-Formularelemente verhalten sich von Haus aus vorhersehbar. Probleme entstehen meist erst durch zusätzliches JavaScript. Hier die wichtigsten Tipps: **Grundregeln für Formularelemente:** - Verwende Absende-Buttons für das Abschicken von Formularen – kein automatisches Absenden - Auswahllisten dienen der Auswahl, nicht der Navigation; für Seitenwechsel gibt es Links oder einen „Los“-Button - Kündige ungewöhnliches Verhalten vorab an, sichtbar und vor dem Element: „Die Auswahl führt automatisch zur nächsten Seite.“ - Bei komplexeren Interaktionen hilft eine kurze Anleitung, siehe auch [Beschriftungen oder Anweisungen](https://barrierefreihochzwei.de/de/wcag/3-3-2-beschriftungen-oder-anweisungen) **Empfehlenswert:** - **Klare Aktions-Buttons**: „Suchen“, „Absenden“, „Weiter“ - **Vorab informieren**: „Nach der Auswahl werden weitere Felder angezeigt.“ - **Erwartungen setzen**: „Klicke auf ‚Speichern‘, um fortzufahren.“ - **Schrittweise einblenden**: Zusätzliche Inhalte nach und nach zeigen, ohne den Fokus zu verschieben **Lieber nicht:** - **Automatisches Absenden**: Formulare nicht beim letzten Feld von selbst abschicken - **Automatische Navigation**: Eine Auswahl soll nicht zu neuen Seiten führen - **Unangekündigte Pop-ups**: Keine Fenster ohne vorherigen Hinweis öffnen - **Fokus kapern**: Den Fokus nicht unvorbereitet versetzen **Technische Umsetzung:** - JavaScript: `change`- und `input`-Ereignisse nutzen, um Inhalte zu erweitern oder zu filtern, nicht um Seiten zu wechseln - HTML: `