3.2.2 Am Eingang (On Input)

WCAG - Definition

Eine Änderung der Einstellung einer Komponente der Benutzeroberfläche darf nicht automatisch zu einer Kontextänderung führen, außer der Benutzer wurde vorher darüber informiert.

Kontextänderung bedeutet:

  • eine neue Seite wird geladen,

  • Fokus wird unerwartet verschoben,

  • Inhalte werden dynamisch ersetzt, sodass der Nutzer sich „verliert“.

Bedeutung

Das Kriterium schützt Nutzer vor unerwarteten Änderungen, wenn sie z. B. ein Formularfeld ausfüllen, eine Checkbox aktivieren oder eine Dropdown-Auswahl treffen.

  • Besonders wichtig für Screenreader-User: Sie können den Kontextverlust oft nicht erkennen.

  • Menschen mit motorischen Einschränkungen: Sie brauchen Zeit und wollen nicht, dass sofort ein Submit/Redirect passiert.

  • Menschen mit kognitiven Einschränkungen: Sie können sich erschrecken, wenn sich plötzlich Inhalte ändern.

Ausreichende Techniken

Änderungen nur nach Benutzerbestätigung ausführen

Beispiel Dropdown für Sprache wechseln
Fehler: Wechsel passiert sofort nach Auswahl.
Lösung: Benutzer klickt erst zusätzlich auf „Bestätigen“.

<label for="language">Sprache auswählen:</label>
<select id="language" name="language">
  <option value="de">Deutsch</option>
  <option value="en">Englisch</option>
</select>
<span id="submitLang" role="button" tabindex="0">Sprache ändern</span>

<script>
  document.getElementById('submitLang').addEventListener('click', () => {
    const lang = document.getElementById('language').value;
    window.location.href = '/?lang=' + lang;
  });
</script>

Wenn Automatik unvermeidbar - Hinweis geben

Bei Formularen mit Auto-Submit (z. B. Captcha oder PLZ → Ortsfeld automatisch befüllen):

<label for="zip">PLZ:</label>
<input id="zip" name="zip" aria-describedby="zipHint">
<p id="zipHint">Nach Eingabe der PLZ wird das Ortsfeld automatisch ausgefüllt.</p>

Progressive Enhancement

  • Eingaben lokal validieren, aber die Kontextänderung erst bei explizitem Submit.

  • Dynamisches Nachladen (AJAX) nur in klar abgegrenzten Bereichen und mit ARIA-Live-Regionen:

Beratungstechniken

  • Mit Kunden/Designern abstimmen, ob eine automatische Änderung wirklich notwendig ist.

    • Ist der Auto-Redirect nach Sprache wirklich nutzerfreundlich?

    • Kann man den Nutzer besser durch einen Button steuern?

  • Einfache Hinweise: „Ihre Auswahl wird sofort übernommen“.

  • Tests mit Screenreadern durchführen: Nutzer verliert sonst den Fokus.

  • Erklären, dass Barrierefreiheit oft auch die Usability für alle verbessert – weniger Frust durch unerwartete Sprünge.

Fehler

  • Dropdowns lösen sofort Seitenwechsel aus, ohne dass der Nutzer das erwartet.
  • Checkbox setzt automatisch den Fokus woanders.
  • Automatische Validierung löscht Eingaben ohne Erklärung.
  • Screenreader bekommen keine Rückmeldung, dass sich Inhalte geändert haben.
  • Entwickler verlassen sich nur auf onchange="this.form.submit()" – das bricht 3.2.2.