Barrierefreiheit ≠ Overlay: Wenn ein modaler Dialog die Tastaturnavigation blockiert

Nach einem Klick auf Weiter erscheint ein Dialog. Der Screenreader liest weiterhin den Hintergrund vor oder die Tastatur erreicht die Schaltfläche Schließen nicht. Der Ablauf wird unterbrochen.

Ein modaler Dialog bündelt die Interaktion vorübergehend auf eine Aufgabe. Solange er geöffnet ist, darf der Hintergrund keinen Tastaturfokus erhalten. Nicht jedes Pop-up muss modal sein.

Beim Öffnen wird der Fokus auf ein geeignetes Element im Dialog gesetzt. Tab und Umschalt+Tab bewegen sich innerhalb seiner Bedienelemente. Beim Schließen kehrt der Fokus normalerweise zum auslösenden Element zurück.

Der Dialog braucht einen zugänglichen Namen, häufig über die Überschrift. Schaltflächen müssen Speichern, Abbrechen oder Schließen verständlich vermitteln. Ein X-Symbol ohne Beschriftung reicht nicht.

In der Regel schließt Escape den Dialog. Bei wichtigen Bestätigungen kann eine besondere Gestaltung nötig sein, doch die nächsten Schritte müssen klar bleiben.

Der Fokus verschwindet hinter dem Dialog, Hintergrundelemente bleiben bedienbar, Meldungen werden nicht vorgelesen oder Schaltflächen sind bei Textvergrößerung nicht erreichbar.

Öffnen Sie den Dialog nur mit der Tastatur. Prüfen Sie Anfangsfokus, Tab, Umschalt+Tab, gegebenenfalls Escape und die Fokusrückgabe. Wiederholen Sie die Prüfung mit Screenreadern.

Blind Reader erleichtert Orientierung und Navigation zusammen mit vorhandenen Screenreadern. Gezielte Korrekturen können einzelne Interaktionen verbessern; der Dialog selbst muss den Fokus zuverlässig steuern.

Ein barrierefreier Dialog ermöglicht es, die Situation zu verstehen, zu entscheiden und die Aufgabe fortzusetzen.

• W3C WAI — Dialog (Modal) Pattern
• W3C WAI — Understanding Keyboard
• W3C WAI — Understanding Focus Order
• W3C WAI — Understanding Name, Role, Value

Folge 20 · Barrierefreiheit ≠ Overlay