Ein Modal sollte den Fokus beim Öffnen auf sich selbst ziehen und beim Schließen wieder korrekt zurückgeben. Alle interaktiven Elemente innerhalb des Modals müssen per Tastatur erreichbar sein, und der Hintergrundinhalt sollte für Screenreader und Tastatur nicht zugänglich sein, solange das Modal aktiv ist. So wird sichergestellt, dass die Interaktion klar, verständlich und barrierefrei bleibt.
Ein barrierefreier Modal wirkt einfach umzusetzen, erfordert aber sorgfältiges Fokusmanagement. In folgendem Video wird gezeigt, wie der Fokus korrekt im Dialog gehalten wird und wie verhindert wird, dass Screenreader-Nutzer:innen versehentlich hinter das Modal gelangen. Zudem wird gezeigt, wie die einzelnen Implementierungsschritte per Tastatur etc. getestet werden kann.
Das Video wurde von »Chrome für Developer« erstellt.
Deutsches Gesetz: Anforderungen der Konformitätsstufe A und AA müssen umgesetzt werden.
Ein Modal muss vollständig mit der Tastatur bedienbar sein, sodass Öffnen, Schließen und die Navigation durch alle Inhalte problemlos möglich sind.
Folgende Interaktionsarten per Tastatur müssen für eine reibungslose Nutzung implementiert werden:
Schließen per ESC Taste und per Schließen-Button
Schließen per Klick auf Hintergrund (::backdrop)
Beim Öffnen des Modals muss eine Fokus-Falle implementiert werden, sodass Screenreader- und Tastaturbenutzer:innen die neuen Inhalte überhaupt wahrnehmen.
Beim Öffnen eines Modals sollte der Fokus auf das erste interaktive HTML-Element innerhalb des Modals gesetzt werden (z. B. Button, Eingabefeld …). Falls das Dialog keine interaktiven Elemente hat und nur reine Informationen liefert, sollte der Fokus auf das komplette Modal gesetzt werden.
Das native <dialog>-Element bringt diese Funktionalitäten komplett mit, sodass dieses für solche Anwendungsfälle genutzt werden sollte.
Beim Schließen des Modals sollte der Fokus wieder auf das Element gesetzt werden, welches das Modal öffnen lassen hat.
Bei eigenen Implementierungen eines Modals muss sichergestellt werden, dass der Fokus zwar innerhalb des Modals bleibt, Nutzer:innen aber weiterhin korrekt navigieren können. Andernfalls könnten sie „feststecken“. Dazu kann das inert-Attribut verwendet werden, um alle Elemente außerhalb des Modals vorübergehend nicht fokussierbar zu machen.
Damit assistive Technologien wissen, welchen Inhalt das Modal beinhaltet und vermittelt, sollte das Dialog ein zugänglichen Namen aufweisen.
Der zugängliche Name kann beispielsweise durch ARIA-Attribute wie aria-label und aria-labelledy hergestellt werden. Grundvoraussetzung ist jedoch, dass der Inhalt des Modals eine zugängliche, beschreibende Überschrift aufweist.
Zuletzt aktualisiert am 12.12.25