Dialog Roles and the Native dialog Element
Mark a layer as a true modal dialog.
Dialog Roles and the Native dialog Element is a free Web Accessibility Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Frequently asked questions
Is the “Dialog Roles and the Native dialog Element” lesson free?
Yes — the full text of “Dialog Roles and the Native dialog Element” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Dialog Roles and the Native dialog Element”?
Mark a layer as a true modal dialog. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Dialog Roles and the Native dialog Element” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Dialog Roles and the Native dialog Element
- Trapping Focus Inside the Modal
- Escape to Close and Restore Focus
- Inert Background and aria-modal