The HTML inert attribute
The HTML inert attribute makes an element and everything inside it inert — it cannot be clicked, focused, selected or reached by assistive technology. It is a boolean global attribute, perfect for disabling the background content behind a modal dialog.
Overview
When you add inert to an element, the browser removes the whole subtree from the tab order and the accessibility tree and ignores pointer interaction. It is the standards-based replacement for fragile combinations of aria-hidden, tabindex="-1" and pointer-events: none.
The classic use is "trapping" focus: when a modal opens, mark the rest of the page inert so keyboard and screen-reader users cannot wander into the hidden content behind it. The native <dialog> element's showModal() does this automatically.
Values
| Value |
|---|
| inert (boolean) |
Example
<div inert style="opacity:.5;">
<button>You cannot focus or click me</button>
</div>Best practices
Accessibility
inert is a major accessibility win: it cleanly removes a region from the accessibility tree and the tab order at once, which is exactly what focus management around dialogs needs. Toggle it on the page's background while a modal is open so assistive-tech users cannot escape into hidden content, and remove it when the modal closes.