Dialog in HTML
Modal öffnen und den Fokus zurückgeben
Auslöser, Dialogname, Schließen-Symbol: drei Stellen auf dem Weg hinein.
Fokusplan
Ein modaler Dialog ist ein eigener Raum.
showModal() legt ihn über die Seite, macht den Hintergrund inaktiv und hält die Tab-Reihenfolge darin. Beim Schließen führt der Weg zum Auslöser zurück.
Der Fokusraum eines nativen Dialogs
dialog.showModal()- 1ÖffnenAuslöser merkt sich den Rückweg
- 2Fokus hinein
autofocusauf „Zurück“ - 3Im KreisTab erreicht nur Dialog und Browser
- 4SchließenSchaltfläche oder Escape
- 5ZurückFokus wieder auf dem Auslöser
dialog mit showModal() wird der Rest des Dokuments inert. Für den Dialog selbst liefert die sichtbare Überschrift den zugänglichen Namen. Top Layer
Drei Ebenen, eine klare Zuständigkeit
Dialog
Name, Inhalt, Formular, Schließen
<dialog aria-labelledby="termin-titel">Backdrop
Trennt die Aufgabe sichtbar von der Seite
::backdropDokument
Für Interaktion und Accessibility Tree inaktiv
vom Browser inert gesetztmethod="dialog"
Schließen ohne eigenes Schließ-Skript
Das Formular wird nicht gesendet. Die betätigte Submit-Schaltfläche bestimmt den Rückgabewert und schließt den Dialog.
<form method="dialog">Welcher Weg schließt?value="zurueck"returnValue: "zurueck"value="absagen"returnValue: "absagen"kein Button-WertreturnValue bleibt unverändert Setzen Sie dialog.returnValue = '' vor jedem Öffnen zurück. Sonst kann Escape bei einem erneut verwendeten Dialog den Wert der vorherigen Entscheidung stehen lassen.
Zum Kopieren
Vollständiger Dialog mit Formular und sicherer Auswertung
HTML
<button type="button" id="termin-oeffnen">
Termin absagen
</button>
<p id="termin-status" role="status"></p>
<dialog id="termin"
aria-labelledby="termin-titel"
aria-describedby="termin-hinweis">
<h2 id="termin-titel">Termin absagen</h2>
<p id="termin-hinweis">
Sie sagen den Termin am 14. Mai um 10:00 Uhr ab.
</p>
<form method="dialog">
<label for="termin-grund">Grund (freiwillig)</label>
<input id="termin-grund" name="grund" type="text">
<button type="submit" value="zurueck" autofocus>
Zurück
</button>
<button type="submit" value="absagen">
Termin absagen
</button>
</form>
</dialog>JavaScript
const dialog = document.querySelector('#termin');
const oeffnen = document.querySelector('#termin-oeffnen');
const status = document.querySelector('#termin-status');
const grund = document.querySelector('#termin-grund');
oeffnen.addEventListener('click', () => {
dialog.returnValue = '';
dialog.showModal();
});
dialog.addEventListener('close', () => {
if (dialog.returnValue === 'absagen') {
const zusatz = grund.value
? ` Grund: ${grund.value}.`
: '';
status.textContent = `Termin abgesagt.${zusatz}`;
} else {
status.textContent = 'Der Termin bleibt bestehen.';
}
});So prüfen Sie es
Der Tastaturweg ist die Abnahme
- Öffnen Sie mit Enter. Der Dialogname wird genannt, Fokus steht auf „Zurück“.
- Drücken Sie Tab und Shift + Tab. Der Fokus verlässt den Dialog nicht.
- Drücken Sie Escape. Der Dialog schließt und der Fokus kehrt zum Auslöser zurück.
- Öffnen Sie erneut und bestätigen Sie. Nur dann lautet der Wert
"absagen".
Quellen für Implementierung und Abnahme
Aus dem Prüfbericht
Drei Regeln am selben Dialog
Kritisch Eine erfundene Rolle am Dialog Regel aria-roles
Das dialog-Element bringt seine Rolle mit. Werte wie role="modalfenster" sind ungültig und liefern gar keine Rolle.
Kritisch Das Schließen-Symbol im Dialogkopf Regel button-name
Ein Kreuz ohne Text bleibt für Vorleseprogramme leer. aria-label="Dialog schließen" gibt der Schaltfläche ihren Namen.
Zum Mitnehmen
Der Dialog, korrigiert
Eine Methode, zwei Attribute, ein Rückweg für den Fokus.
Korrektur in 3 Schritten ansehen
Den Dialog modal öffnen
showModal() deaktiviert den Hintergrund von selbst. Das zusätzliche aria-hidden verbirgt dagegen Elemente, die der Fokus weiterhin erreichen kann.
KorrekturvergleichSchritt 1 · JavaScript Vorher
dialog.setAttribute('open', ''); hintergrund.setAttribute('aria-hidden', 'true');Nachher
dialog.showModal();Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie den Dialog und drücken Sie Tab. Der Fokus bleibt im Dialog.
Rolle und Name des Dialogs klären
dialog bringt seine Rolle mit; ein erfundener Wert löscht sie. Die Überschrift wird zum Dialognamen, das Kreuz bekommt ein Wort.
KorrekturvergleichSchritt 2 · HTML Vorher
<dialog id="termin" role="modalfenster"> <h2>Termin bestätigen</h2> <button data-close>×</button> </dialog>Nachher
<dialog id="termin" aria-labelledby="termin-titel"> <h2 id="termin-titel">Termin bestätigen</h2> <button data-close aria-label="Dialog schließen">×</button> </dialog>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie den Dialog mit einem Vorleseprogramm. Es nennt „Termin bestätigen, Dialog“.
Die automatische Fokusrückgabe prüfen
Der native modale Dialog gibt den Fokus beim Schließen an den Auslöser zurück, solange dieser noch besteht. Eigenes Fokusmanagement braucht nur ein abweichender Arbeitsablauf.
KorrekturvergleichSchritt 3 · JavaScript Vorher
oeffnen.addEventListener('click', () => { dialog.showModal(); }); dialog.addEventListener('close', () => { oeffnen.focus(); });Nachher
oeffnen.addEventListener('click', () => { dialog.showModal(); });Markierte Zeilen wurden geändert
So prüfen Sie es Schließen Sie den Dialog mit Escape. Der Fokus steht wieder auf der Auslöser-Schaltfläche.