3.2.1 Im Fokus (On Focus)

WCAG – Definition

Wenn ein Element den Fokus erhält (z. B. durch Tab, Screenreader-Navigation oder Klick), darf keine automatische Änderung des Kontextes erfolgen.

„Kontextänderung“ bedeutet:

  • Automatisches Absenden eines Formulars

  • Automatisches Öffnen eines neuen Fensters oder Tabs

  • Unerwartete Navigation auf eine andere Seite

Bedeutung

  • Menschen mit motorischen Einschränkungen nutzen Tastatur oder alternative Eingaben → jeder Fokus-Wechsel ist oft ein bewusst langsamer Prozess. Unerwartete Aktionen stören massiv.

  • Screenreader-Nutzer*innen verlieren die Orientierung, wenn ohne Vorwarnung neue Inhalte geladen oder der Fokus verschoben wird.

  • Kognitive Einschränkungen: Unerwartete Änderungen überfordern oder führen zu Fehlbedienungen.

Kurz: Nutzer*innen müssen vollständig die Kontrolle behalten, was passiert, wenn sie ein Feld oder ein Element fokussieren.

Ausreichende Techniken

Kein automatischer Submit bei Fokus

Falsch:

<input type="text" onfocus="this.form.submit()">

Richtig:
Formular erst absenden, wenn Nutzer*innen bewusst auf „Absenden“ klicken oder Enter drücken:

<form action="/search" method="get">
  <label for="search">Suche:</label>
  <input type="text" id="search" name="q">
  <button type="submit">Suchen</button>
</form>

Keine Navigation durch Fokus allein

Falsch:

<select onchange="location=this.value;">
  <option value="home.html">Home</option>
  <option value="produkte.html">Produkte</option>
</select>

Hier wechselt die Seite, sobald das Feld den Fokus bekommt oder die Auswahl verändert wird.

Richtig:

<select id="navigation">
  <option value="home.html">Home</option>
  <option value="produkte.html">Produkte</option>
</select>
<button onclick="window.location=document.getElementById('navigation').value">
  Los
</button>

Erst mit Button wird die Aktion ausgelöst.

Fokusänderungen nur für sichtbare Unterstützung, nicht für Kontextänderungen

Beispiel: Input-Feld wird beim Fokus visuell hervorgehoben (ok):

input:focus {
  outline: 2px solid #005fcc;
}

Beratungstechniken

  • Keine automatischen Aktionen an onfocus oder onchange hängen.

  • Immer explizite Buttons oder Bestätigungen anbieten.

  • In Formularen: Änderungen nur nach Absenden durch Nutzer*innen wirksam machen.

  • Bei Dropdowns oder Auswahlfeldern: erst nach Klick auf „Bestätigen“/„Los“ weiterleiten.

  • Entwickler*innen sollten sich klar fragen: „Kann die Aktion auch versehentlich passieren?“ → Wenn ja, dann nicht automatisch ausführen.

Fehler

  • Formular wird automatisch gesendet, wenn ein Feld fokussiert wird.

  • Spracheinstellung oder Designwechsel springt sofort beim Fokus auf ein Dropdown um.

  • Seitenwechsel in Navigation, sobald man ein Dropdown-Feld berührt.

  • Neue Fenster öffnen sich ohne dass Nutzer*innen das wollten.