对话框角色与原生 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 styled div can look like a popup, yet assistive tech sees ordinary content. Without the right role, users never learn a dialog opened.

The HTML dialog element is built for this job. It carries dialog semantics for free, so screen readers announce it correctly.

Call showModal() in JavaScript to open dialog as a real modal. This is what makes the page behind it inert and unreachable.

Watch out: show() opens the dialog as non-modal, so the page stays interactive behind it. For a blocking dialog, you want showModal().

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.

When a dialog demands a response, like a delete confirmation, use role="alertdialog". It signals extra urgency to assistive tech.

A dialog must have an accessible name so users know its purpose on open. Point aria-labelledby at the heading inside it.

The native element offers a matching close() method. Calling it dismisses the dialog and lets the page behind become reachable again.

A modal dialog gets a free backdrop you can style with the ::backdrop pseudo-element. It dims the page and signals focus has shifted.

The native dialog handles focus, Escape, and inerting the background for you. Reaching for it means fewer bugs than a hand-rolled div.

You want a confirmation popup that blocks the page until the user responds. Which call should you use?

You learned a modal needs dialog semantics. Prefer the native dialog with showModal(), give it a name, and reserve alertdialog for urgent choices.