The <dialog> Element
As defined in the HTML Living Standard, the <dialog> element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or sub-window.
<dialog id="my-dialog">
<h3>Confirmation</h3>
<p>Are you sure?</p>
<button onclick="this.closest('dialog').close()">Close</button>
</dialog>
View HTML Living Standard: The dialog element
Modal vs. Non-Modal
The <dialog> element can be opened in two distinct ways:
- Modal (
showModal()): The dialog is displayed on the top layer. The rest of the page is inert (non-interactive) until the dialog is closed. This is the preferred method for critical alerts. - Non-Modal (
show()): The dialog is displayed but the rest of the page remains interactive.
WCAG Requirement: Focus Order
Success Criterion 2.4.3 (Level A): Focus order must be logical and intuitive.
When using showModal(), the browser automatically handles "focus trapping." This means the Tab key will only cycle through elements inside the dialog, preventing the user from accidentally tabbing into the background page. This is a critical accessibility feature that previously required complex JavaScript.
Accessibility Best Practices
To ensure your dialogs are fully accessible, follow these rules:
- Labeling: Always provide a heading (e.g.,
<h3>) inside the dialog. For better screen reader support, usearia-labelledby="heading-id"on the dialog tag. - Closing: Always provide a clear, visible "Close" or "Cancel" button.
- Initial Focus: When the dialog opens, focus should be moved to the first interactive element or the dialog itself.
A11y Tip: The Backdrop
When a modal dialog is open, browsers provide a ::backdrop pseudo-element. You can style this to dim the background, which helps users with cognitive disabilities focus on the active task by reducing visual noise.