The <dialog> Element
As defined in the HTML Living Standard, the <dialog> element represents a part of an application that a user interacts with to perform a task, such as a dialog box, inspector, or window.
Click the button to open a native modal dialog.
<dialog id="myDialog">
<p>Greetings, explorer!</p>
<button id="close">Close</button>
</dialog>
<script>
const dialog = document.getElementById('myDialog');
dialog.showModal(); // Opens as a modal
</script>
View HTML Living Standard: The dialog element
Modal vs. Non-Modal
The behavior of the <dialog> depends on how it is opened via JavaScript:
.showModal(): The preferred method for accessibility. It renders the dialog on the top layer, prevents interaction with the rest of the page (inertness), and allows the::backdroppseudo-element to be styled..show(): Opens the dialog as a non-modal popup. The rest of the page remains interactive, and no focus trap is created.
WCAG Requirement: Focus Order
Success Criterion 2.4.3 (Level A): If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
Native <dialog> elements opened with showModal() automatically satisfy this by "trapping" focus within the dialog. When the dialog is closed, focus is automatically returned to the element that opened it. This is a massive win for keyboard and screen reader users.
Best Practices
- Escape Key: Browsers automatically close a modal dialog when the user presses Esc. Do not prevent this behavior.
- Initial Focus: By default, the browser moves focus to the first focusable element inside the dialog. Ensure this is a logical starting point for the user.
- Labeling: Always provide an accessible name. If the dialog has a visible heading, use
aria-labelledbyto link the dialog to that heading.
A11y Tip: Inertness
Using showModal() makes the rest of the document inert to assistive technologies. This prevents screen reader users from accidentally navigating outside the dialog while it is active, satisfying WCAG SC 4.1.2 (Name, Role, Value) by clearly defining the current context of interaction.