dialog
Window roleMarks a container as a dialog — a window overlaid on the page for a focused task or message. It needs an accessible name via aria-labelledby or aria-label and, when modal, aria-modal plus focus management. Use the native `<dialog>` element where possible for built-in behavior.
Used on
A dialog container — commonly a <div>, or the native <dialog> element.
Required properties
aria-modal="true"— strongly recommended for modal dialogsaria-labelledby or aria-label
Accessible name
Required. Provide a name via aria-labelledby (the dialog's heading) or aria-label.
Used by components
Example
role="dialog"
<div role="dialog" aria-modal="true"
aria-labelledby="dialog-title">
<h2 id="dialog-title">Delete file?</h2>
<p>This action cannot be undone.</p>
<button>Cancel</button>
<button>Delete</button>
</div>References