aria-modal am Dialog
Der Dialog sperrt, was hinter ihm liegt
Dialog und Hintergrundseite: zwei Stellen, an denen Modalität stimmen muss.
Semantik und Sperre
aria-modal ist das Schild, nicht die Tür
Erst vier zusammenhängende Schichten machen aus einem Fenster einen modalen Dialog.
Namearia-labelledby="dialog-titel"
Semantikrole="dialog" aria-modal="true"
Newsletter abbestellen?
Sie erhalten danach keine Hinweise mehr.
Tab läuft zwischen den Dialogaktionen im Kreis.
SperreDer Hintergrund ist sichtbar verdeckt und inert.
FokusEr beginnt innen, bleibt innen und kehrt danach zurück.
aria-modal="true"teilt den Zustand mitFokus + inert + Darstellungsetzt den Zustand umDrei ähnliche Zeilen, drei verschiedene Ergebnisse
Nur eine Variante baut die Sperre des Browsers auf.
aria-modal="true"
Ansage ohne Verhalten
- jaModalität im Accessibility Tree
- neinHintergrund automatisch inert
- neinFokus automatisch eingeschlossen
dialog.show()
Nicht modaler Dialog
- janatives Dialogelement sichtbar
- neinHintergrund inert
- nein
::backdropim Top Layer
dialog.showModal()
Modales Verhalten
- jaDialog im Top Layer
- jaübriges Dokument inert
- ja
::backdropverfügbar
Der Fokusweg muss geschlossen sein
Fokus steht auf „Newsletter abbestellen“.
Fokus zieht ein. Tab und Umschalt + Tab bleiben hier.
Fokus landet wieder am Auslöser.
Die native Kurzform
showModal() setzt den Dialog in den Top Layer und macht das übrige Dokument inert. Der explizite close-Handler hält die Rückkehr des Fokus eindeutig.
<button type="button" id="oeffnen">
Newsletter abbestellen
</button>
<dialog id="abmelden" aria-labelledby="dialog-titel">
<h2 id="dialog-titel">Newsletter abbestellen?</h2>
<p>Sie erhalten danach keine Hinweise mehr.</p>
<form method="dialog">
<button value="abbrechen" autofocus>Abbrechen</button>
<button value="bestaetigen">Abbestellen</button>
</form>
</dialog>
<script>
const oeffner = document.getElementById('oeffnen');
const dialog = document.getElementById('abmelden');
oeffner.addEventListener('click', () => dialog.showModal());
dialog.addEventListener('close', () => oeffner.focus());
</script>So prüfen Sie es
TabKein Ziel hinter dem offenen Dialog erhält Fokus.
Umschalt + TabDer Fokus kreist auch rückwärts.
EscapeDer Dialog schließt über die Plattformaktion.
ZeigerDer verdeckte Hintergrund reagiert nicht.
VorlesenName und Rolle des Dialogs werden erkannt.
SchließenDer Fokus kehrt zum sinnvollen Ausgangspunkt zurück.
Aus dem Prüfbericht
Zwei Stellen, zwei Befunde
Kritisch aria-modal an einem Element ohne Dialogrolle Regel aria-allowed-attr
Ohne role="dialog" ist das Attribut unzulässig und wirkungslos. Das Element dialog bringt die Rolle mit.
Zum Mitnehmen
Der Dialog, korrigiert
Das native Element, modal geöffnet, mit gesperrtem Hintergrund.
Korrektur in 3 Schritten ansehen
Den nativen Dialog verwenden
Das Element dialog bringt Rolle und Modalität mit. Ein aria-modal am div beschreibt nur etwas, das nicht passiert.
KorrekturvergleichSchritt 1 · HTML Vorher
<div class="dialog" aria-modal="true"> <h2>Newsletter abbestellen</h2> </div>Nachher
<dialog id="abmelden"> <h2>Newsletter abbestellen</h2> </dialog>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie den Dialog und drücken Sie mehrfach die Tabulatortaste. Der Fokus bleibt darin.
Den Dialog modal öffnen
show öffnet ohne Sperre, showModal mit. Nur showModal hält Fokus und Bedienung innerhalb des Dialogs.
KorrekturvergleichSchritt 2 · JavaScript Vorher
document.getElementById('abmelden').show();Nachher
document.getElementById('abmelden').showModal();Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie neben den Dialog. Die Seite dahinter reagiert nicht mehr.
Den Hintergrund richtig sperren
Wo kein nativer Dialog möglich ist, macht inert den Hintergrund stumm und unbedienbar. aria-hidden tut nur das Erste.
KorrekturvergleichSchritt 3 · HTML Vorher
<main id="inhalt" aria-hidden="true">…</main>Nachher
<main id="inhalt" inert>…</main>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie bei offenem Dialog weiter. Kein Link der Seite dahinter bekommt Fokus.