Dialogrollen und das native dialog-Element
Kennzeichnen Sie eine Ebene als echten modalen Dialog.
Dialogrollen und das native dialog-Element ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
What Makes a Dialog a Dialog
A dialog is a layer that interrupts the page to ask for input or show a message. Screen reader users need to be told it is a dialog, not just floating text.
A div Looks Modal but Is Not
A styled div can look like a popup, yet assistive tech sees ordinary content. Without the right role, users never learn a dialog opened.
<div class="modal">Are you sure?</div>Meet the Native dialog Element
The HTML dialog element is built for this job. It carries dialog semantics for free, so screen readers announce it correctly.
<dialog>Are you sure?</dialog>Open It as a True Modal
Call showModal() in JavaScript to open dialog as a real modal. This is what makes the page behind it inert and unreachable.
document.querySelector("dialog").showModal();show() Is Not Modal
Watch out: show() opens the dialog as non-modal, so the page stays interactive behind it. For a blocking dialog, you want showModal().
dialog.show();The role Behind dialog
Under the hood, the element maps to the dialog role. If you must build one from a div, role="dialog" is the attribute that gives it meaning.
<div role="dialog">Settings</div>alertdialog for Urgent Choices
When a dialog demands a response, like a delete confirmation, use role="alertdialog". It signals extra urgency to assistive tech.
<div role="alertdialog">Delete this file?</div>Every Dialog Needs a Name
A dialog must have an accessible name so users know its purpose on open. Point aria-labelledby at the heading inside it.
<dialog aria-labelledby="t"><h2 id="t">Confirm</h2></dialog>Close It in Code
The native element offers a matching close() method. Calling it dismisses the dialog and lets the page behind become reachable again.
dialog.close();The Built-In Backdrop
A modal dialog gets a free backdrop you can style with the ::backdrop pseudo-element. It dims the page and signals focus has shifted.
dialog::backdrop { background: rgba(0,0,0,0.5); }Why Native Saves You Work
The native dialog handles focus, Escape, and inerting the background for you. Reaching for it means fewer bugs than a hand-rolled div.
Quick Check
You want a confirmation popup that blocks the page until the user responds. Which call should you use?
Recap: Use Real Dialogs
You learned a modal needs dialog semantics. Prefer the native dialog with showModal(), give it a name, and reserve alertdialog for urgent choices.
Häufig gestellte Fragen
Ist die Lektion „Dialogrollen und das native dialog-Element“ kostenlos?
Ja — der vollständige Text von „Dialogrollen und das native dialog-Element“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Dialogrollen und das native dialog-Element“?
Kennzeichnen Sie eine Ebene als echten modalen Dialog. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Dialogrollen und das native dialog-Element“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Dialogrollen und das native dialog-Element
- Fokus im Modal einschließen
- Mit Escape schließen und den Fokus wiederherstellen
- Inaktiver Hintergrund und aria-modal