Focus Trap Accessibility
Der Fokus bleibt im Dialog, der Ausgang offen
Dialog, Hintergrund, Schließen: drei Stellen im Tastaturweg.
Abnahme am Dialog
Sechs Zeilen für den offenen Dialog
Öffnen, umlaufen, schließen, zurückkehren.
- Richtig Nach dem Öffnen steht der Fokus im Dialog.
- Richtig Die Tabulatortaste läuft im Dialog um und verlässt ihn nicht.
- Richtig Escape schließt den Dialog.
- Richtig Nach dem Schließen steht der Fokus wieder auf dem Auslöser.
- Fehlt Der Hintergrund trägt aria-hidden, seine Links bleiben mit Tab erreichbar.
- Fehlt Der Dialog lässt sich nur mit der Maus schließen.
Aus dem Prüfbericht
Ein Befund am offenen Dialog
Zum Mitnehmen
Der Dialog, korrigiert
Ein Attribut, eine Methode, eine Zeile für den Rückweg.
Korrektur in 3 Schritten ansehen
Den Hintergrund inert schalten
aria-hidden verbirgt den Hintergrund nur vor Vorleseprogrammen. inert nimmt ihn zusätzlich aus der Tab-Reihenfolge, solange der Dialog offen ist.
KorrekturvergleichSchritt 1 · HTML Vorher
<main id="seite" aria-hidden="true"> <a href="/preise">Preise</a> </main> <dialog id="hinweis"> <button type="button" class="schliessen">Schließen</button> </dialog>Nachher
<main id="seite" inert> <a href="/preise">Preise</a> </main> <dialog id="hinweis"> <button type="button" class="schliessen">Schließen</button> </dialog>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie im offenen Dialog mehrmals die Tabulatortaste. Kein Fokus landet dahinter.
Den Dialog mit showModal öffnen
showModal öffnet den Dialog modal. Der Browser hält den Fokus darin und schließt bei Escape, ganz ohne eigene Tastaturschleife.
KorrekturvergleichSchritt 2 · JavaScript Vorher
const dialog = document.getElementById('hinweis'); dialog.setAttribute('open', '');Nachher
const dialog = document.getElementById('hinweis'); dialog.showModal();Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Escape. Der Dialog schließt sich.
Den Fokus zum Auslöser zurückgeben
Nach dem Schließen führt der Fokus zurück auf die Schaltfläche, die den Dialog geöffnet hat. Sonst beginnt der Tastaturweg wieder oben.
KorrekturvergleichSchritt 3 · JavaScript Vorher
const ausloeser = document.getElementById('hinweis-oeffnen'); ausloeser.addEventListener('click', () => dialog.showModal());Nachher
const ausloeser = document.getElementById('hinweis-oeffnen'); ausloeser.addEventListener('click', () => dialog.showModal()); dialog.addEventListener('close', () => ausloeser.focus());Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie den Dialog mit der Tastatur und schließen Sie ihn. Der Fokus steht wieder auf dem Auslöser.