Dialog Roles and the Native dialog Element
Mark a layer as a true modal dialog.
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>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