Inert Background and aria-modal
Make the rest of the page unreachable while open.
The Page Behind Still Exists
Even with focus trapped, the content behind your modal is still in the DOM. A screen reader can wander into it unless you stop it.
Enter the inert Attribute
The inert attribute makes an element and all its children unfocusable, unclickable, and skipped by assistive tech in one move.
<main inert>...page content...</main>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