Barrierefreiheitszertifikat – Startseite

3.2.2 Bei Eingabe

Wer ein Feld ausfüllt, eine Auswahl trifft oder ein Kästchen anhakt, darf nicht ungefragt auf eine andere Seite oder in einen anderen Zusammenhang geraten.

Stufe APrinzip 3: Verständlich

Was bedeutet das?

Eingaben in Formularfeldern, Auswahllisten, Kontrollkästchen oder Optionsfeldern dürfen keinen Kontextwechsel auslösen, wenn vorher nicht darauf hingewiesen wurde. Ein Kontextwechsel ist zum Beispiel ein Seitenwechsel, ein neues Fenster oder ein Fokussprung.

Die sicherste Lösung ist ein eigener Button wie „Anwenden“ oder „Weiter“. Wenn eine Änderung doch sofort wirken soll, muss das vorher klar und sichtbar angekündigt werden. Inhalte auf derselben Seite zu aktualisieren, etwa einen Preis, ist kein Kontextwechsel.

Wem hilft das?

  • Screenreader-Nutzer, die eine Auswahlliste mit den Pfeiltasten durchgehen
  • Menschen, die nur mit der Tastatur arbeiten
  • Menschen mit kognitiven Einschränkungen
  • Menschen mit motorischen Einschränkungen, die versehentlich eine falsche Option wählen

Typische Fehler

  • Eine Länder- oder Sprachauswahl wechselt sofort die Seite, sobald man mit der Pfeiltaste eine Option berührt.
  • Ein Formular schickt sich ab, wenn das letzte Feld ausgefüllt ist.
  • Das Anhaken eines Kästchens öffnet ohne Vorwarnung ein neues Fenster.
  • Nach Eingabe der vierten Ziffer springt der Fokus automatisch ins nächste Feld, ohne dass das angekündigt ist.

So prüfen wir das

  • nur Mensch Nur von Hand: Hier lässt sich nichts Sinnvolles messen. Die Prüferin oder der Prüfer testet es direkt.

Prüffrage: Das Ändern einer Einstellung (Auswahl, Checkbox) wechselt den Kontext nicht ohne vorherigen Hinweis.

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

Problem
<select onchange="location.href = this.value">
  <option value="/de/">Deutsch</option>
  <option value="/en/">English</option>
</select>
Besser
<form action="/sprache">
  <label for="sprache">Sprache</label>
  <select id="sprache" name="lang">
    <option value="de">Deutsch</option>
    <option value="en" lang="en">English</option>
  </select>
  <button type="submit">Sprache wechseln</button>
</form>

Die Seite wechselt erst, wenn die Person den Button bewusst auslöst.

Praxistipps

  • Filter im Shop dürfen die Trefferliste auf derselben Seite sofort aktualisieren. Melden Sie die neue Trefferzahl dann als Statusmeldung (siehe 4.1.3).

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 3.2.2 On Input

Wie steht Ihre Website bei diesem Kriterium?

Der kostenlose Check prüft Ihre Startseite automatisch, das Audit entscheidet alle 55 Kriterien.

Kostenlos prüfenAlle Kriterien