Barrierefreiheitszertifikat – Startseite
Kostenlos prüfen Menü

Modaler Dialog: Fokus rein, Fokus raus, nichts dazwischen

Ein modaler Dialog sperrt den Rest der Seite, bis er geschlossen ist. Für Tastatur- und Screenreader-Nutzer funktioniert das nur, wenn der Fokus sauber hinein- und wieder herausgeführt wird.

2.4.32.1.24.1.22.4.112.1.1

Live-Demo

Diese Demo ist mit axe-core ohne Verstöße geprüft und vollständig per Tastatur bedienbar.

Probieren Sie es mit der Tastatur: Tab, Enter, Leertaste, Pfeiltasten, Escape. Mit eingeschaltetem Screenreader hören Sie, was angesagt wird.

Newsletter wirklich abbestellen?

Sie erhalten dann keine Hinweise mehr zu neuen Ratgebern. Sie können sich jederzeit wieder anmelden.

Die Live-Demo braucht JavaScript. Code und Anforderungen stehen unten.

Tastaturbedienung

Tab / Umschalt+Tab
Bewegt den Fokus zwischen den Elementen im Dialog; die Seite dahinter ist nicht erreichbar.
Escape
Schließt den Dialog; der Fokus kehrt zum Auslöser zurück.
Enter / Leertaste
Löst den fokussierten Button aus.

Wann Sie das Muster einsetzen

Nutzen Sie einen modalen Dialog für kurze Aufgaben, die jetzt erledigt werden müssen: eine Bestätigung, eine kurze Eingabe. Lange Formulare oder Inhalte, die man neben der Seite lesen will, gehören nicht in einen Dialog.

Das native <dialog> mit showModal() nimmt Ihnen viel ab: Der Rest der Seite wird inaktiv, Escape schließt den Dialog, und der Browser setzt den Fokus in den Dialog. Prüfen Sie trotzdem, ob der Fokus nach dem Schließen auf dem Auslöser landet.

Rollen, Zustände, Eigenschaften

  • Natives <dialog>, geöffnet mit showModal(). Bei eigenen Lösungen: role="dialog" und aria-modal="true".
  • Ein Name über aria-labelledby auf die Dialog-Überschrift.
  • Optional aria-describedby auf einen kurzen Erklärtext.
  • Ein sichtbarer Schließen-Button mit zugänglichem Namen, zum Beispiel „Schließen“.
  • Beim Öffnen landet der Fokus auf dem ersten sinnvollen Element, beim Schließen auf dem Button, der den Dialog geöffnet hat.

Tastaturbedienung

TasteWirkung
Tab / Umschalt+TabBewegt den Fokus zwischen den Elementen im Dialog; die Seite dahinter ist nicht erreichbar.
EscapeSchließt den Dialog; der Fokus kehrt zum Auslöser zurück.
Enter / LeertasteLöst den fokussierten Button aus.

Code

HTML und JavaScript (gekürzt)
<button type="button" id="open">Abo kündigen</button>

<dialog id="dlg" aria-labelledby="dlg-h">
  <h2 id="dlg-h">Abo wirklich kündigen?</h2>
  <p>Sie können es jederzeit neu abschließen.</p>
  <form method="dialog">
    <button value="no">Abbrechen</button>
    <button value="yes">Kündigen</button>
  </form>
</dialog>

<script type="module">
const dlg = document.getElementById('dlg');
const opener = document.getElementById('open');
opener.addEventListener('click', () => dlg.showModal());
dlg.addEventListener('close', () => opener.focus());
</script>

Häufige Fehler

  • Fokus bleibt beim Öffnen auf der Seite dahinter: Tastaturnutzer bedienen unsichtbar den Hintergrund.
  • Kein Weg hinaus: weder Escape noch ein Schließen-Button mit Namen (nur ein „ד ohne Text).
  • Nach dem Schließen springt der Fokus an den Seitenanfang statt zurück zum Auslöser.
  • Hintergrund nur optisch abgedunkelt, aber für Screenreader weiter erreichbar (fehlendes aria-modal oder inert).

Passende WCAG-Kriterien

Quellen

Sind Ihre Komponenten so gebaut?

Der kostenlose Check findet viele Fehler automatisch. Im Audit prüft ein Mensch jede Komponente mit Tastatur und Screenreader.

Kostenlos prüfenPrüfmethode ansehen