Modale Dialoge
Ein modaler Dialog blendet ein Fenster über dem restlichen Seiteninhalt ein, blockiert dessen Bedienung, bis der Dialog geschlossen wird, und muss dafür den Tastaturfokus aktiv verwalten - beim Öffnen hinein, beim Schließen zurück zum auslösenden Element.
Kurz erklärt
Ein korrekt implementierter modaler Dialog erfüllt drei Anforderungen gleichzeitig: Beim Öffnen springt der Fokus in den Dialog, meist auf dessen erstes fokussierbares Element oder die Überschrift; solange der Dialog offen ist, bleibt der Fokus innerhalb des Dialogs (Focus-Trapping), sodass Tab und Umschalt+Tab nur zwischen den Elementen im Dialog wechseln; und beim Schließen - über Escape, einen Schließen-Button oder einen Klick außerhalb - kehrt der Fokus zu dem Element zurück, das den Dialog ursprünglich geöffnet hat. Zusätzlich sollte der Dialog per role="dialog" und aria-modal="true" sowie einem zugänglichen Namen (etwa über aria-labelledby auf die Dialog-Überschrift) ausgezeichnet sein, damit Screenreader ihn als eigenständigen Kontext erkennen.
Beispiel
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
<h2 id="dialog-title">Newsletter abonnieren</h2>
<button aria-label="Dialog schließen">×</button>
<!-- Formular -->
</div>Beim Öffnen wird der Fokus per JavaScript auf die Überschrift oder das erste Formularfeld gesetzt; Tab-Druck am letzten fokussierbaren Element im Dialog springt zurück zum ersten (statt aus dem Dialog heraus); Escape oder der Schließen-Button geben den Fokus an das auslösende Element zurück.
Warum ist das relevant?
Modale Dialoge sind gleichzeitig eines der am häufigsten eingesetzten und am häufigsten fehlerhaft implementierten Interface-Muster: Cookie-Banner, Login-Overlays, Warenkorb-Vorschauen und Bestätigungsdialoge kommen auf fast jeder kommerziellen Website vor. Fehlt das Focus-Trapping vollständig, springt der Fokus beim Tabben unbemerkt hinter den Dialog auf die verdeckte Seite dahinter; fehlt der Ausweg aus dem Trapping, entsteht eine Tastaturfalle, die die gesamte übrige Seite für Tastaturnutzer blockiert.
Häufige Missverständnisse
Ein per CSS oder display: none unsichtbar gemachter Seiteninhalt hinter dem Dialog bleibt für Tastaturnutzer trotzdem per Tab erreichbar, wenn er nicht zusätzlich aus dem Fokus-Zyklus entfernt wird (etwa über inert oder konsequentes Focus-Trapping) - visuelle Verdeckung allein reicht nicht aus. Ebenso wird oft vergessen, den Fokus beim Schließen aktiv zurückzusetzen: Ohne diesen Schritt springt der Fokus häufig zurück an den Seitenanfang (<body>), und der Nutzer muss sich erneut komplett orientieren. Auch aria-modal="true" allein sorgt nicht für Focus-Trapping - das Attribut informiert Screenreader über den modalen Charakter, das tatsächliche Fokus-Management muss weiterhin per JavaScript umgesetzt werden.
Weiterführende Inhalte
Aus der Praxis
Cookie-Banner und Login-Overlays sind in der Praxis die häufigste Quelle für Tastaturfallen, weil sie fast immer als modaler Dialog implementiert werden, dabei aber selten alle drei Anforderungen (Fokus hinein, Fokus eingeschlossen mit Ausweg, Fokus zurück) vollständig umsetzen.