Best practice: Der Fokus wird auf neu hinzugefügte Inhalte gerichtet

Das bedeutet

Wenn auf einer Seite neue Inhalte dynamisch eingeblendet werden, zum Beispiel ein Dialog, ein Hinweis oder ein Overlay, muss der Tastaturfokus automatisch auf dieses neue Element gesetzt werden.
So wissen Nutzer und Nutzerinnen sofort, dass sich der Kontext geändert hat, und können direkt mit dem neuen Inhalt interagieren.

Auswirkung

Wenn der Fokus nicht auf neu hinzugefügte Inhalte gerichtet wird, kann es passieren, dass Nutzerinnen und Nutzer mit Tastatur oder Screenreader nicht bemerken, dass sich etwas auf der Seite verändert hat.
Der Fokus bleibt dann auf einem unsichtbaren oder inaktiven Element, während wichtige Informationen oder Aktionen unzugänglich bleiben.
Das verletzt WCAG 2.4.3 (A) Fokusreihenfolge und WCAG 4.1.3 (A) Statusmeldungen.

Empfehlung

Setzen Sie beim Öffnen eines Dialogs, Modals oder Overlays den Fokus auf das neue Element (z. B. den Dialogcontainer oder die erste interaktive Schaltfläche).
Wenn der neue Inhalt geschlossen wird, geben Sie den Fokus an das vorherige Element zurück.
Nutzen Sie JavaScript-Methoden wie .focus() oder ARIA-Attribute wie aria-modal="true", um den Fokus gezielt zu steuern.
Testen Sie alle dynamischen Inhalte (Pop-ups, Tooltips, Akkordeons) mit der Tastatur, um sicherzustellen, dass der Fokus korrekt verschoben wird.

Beispiele

Problematisch:

<button onclick="document.getElementById('modal').style.display='block'">
  Öffnen
</button>

<div id="modal" role="dialog" style="display:none;">
  <p>Dialoginhalt</p>
  <button>Schließen</button>
</div>

Der Dialog öffnet sich, aber der Fokus bleibt auf der Schaltfläche Öffnen. Tastaturnutzer wissen nicht, dass sich ein neues Fenster geöffnet hat.

Besser:

<button onclick="openDialog()">Öffnen</button>

<div id="modal" role="dialog" aria-modal="true" style="display:none;">
  <p>Dialoginhalt</p>
  <button id="close-btn">Schließen</button>
</div>

<script>
  function openDialog() {
    const modal = document.getElementById('modal');
    modal.style.display = 'block';
    modal.querySelector('button').focus();
  }
</script>

Hier wird der Fokus nach dem Öffnen des Dialogs auf den Schließen-Button gesetzt – Nutzer und Nutzerinnen erkennen sofort den Kontextwechsel.

Hinweis

Eine korrekte Fokussteuerung ist besonders bei Overlays, Dialogen und dynamisch eingeblendeten Meldungen entscheidend. Sie sorgt dafür, dass Nutzerinnen und Nutzer immer wissen, wo sie sich gerade befinden und was als Nächstes zu tun ist.

Verknüpfte WCAG-Kriterien:
WCAG 2.4.3 – Fokusreihenfolge
WCAG 4.1.3 – Statusmeldungen
Zur offiziellen WCAG-Dokumentation →