What does the HTML inert attribute do to the subtree it is set on, and which bug does it fix that hiding the background visually or with aria-hidden does not?

## The problem Open a modal built by hand. The overlay dims the page and the dialog takes focus. Now press Tab a few times: focus walks out of the dialog and into the links and buttons behind the overlay, which are still perfectly focusable — the user is now typing into a form they cannot see. A screen-reader user has the same experience, wandering through page content that is visually "gone". The patches people reach for each fix half of it: - **Dimming with an overlay** fixes nothing; it is purely visual. - **`aria-hidden="true"` on the background** hides it from assistive technology but leaves everything focusable. This produces the worst state of all: focus lands on an element the screen reader has been told is not there, so the user hears nothing while their focus has moved. - **`display: none` on the background** genuinely removes interaction and accessibility exposure, but the background is now invisible, which defeats the point of a modal overlay. - **A JavaScript focus trap** works but is yours to write, maintain and get right in every edge case. ## What inert does `inert` is a boolean global attribute. Applied to an element, it puts that element **and its entire subtree** into an inert state: ```html <main inert>…the page behind the modal…</main> <div role="dialog" aria-modal="true">…</div> ``` In that state the subtree: - is skipped by sequential focus navigation, so Tab never enters it; - cannot be focused programmatically either — calling `focus()` on a node inside does nothing, which is what makes it stronger than removing elements from the tab order; - does not fire click or other activation events, so pointer interaction is dead; - is not editable and its text is not selectable; - is skipped by find-in-page; - is exposed to assistive technology as not present. That combination is exactly "visible but switched off", and nothing else in the platform gives you all of it declaratively. ## The boolean trap `inert` is a **boolean attribute**, so its value is irrelevant — presence is everything. `inert="false"` still makes the element inert. The only way to turn it off is to remove the attribute: ```js el.inert = false; // reflects the property; removes the attribute el.removeAttribute("inert"); // equivalent ``` And inertness is not overridable from below: there is no way for a descendant to opt out of an inert ancestor. If you need part of a subtree live, the inert boundary has to move up or split. ## Where you do not need it A `<dialog>` opened with `showModal()` puts everything outside the dialog into this same inert state automatically, and it is placed in the top layer above the rest of the page. That is the strongest argument for using the native element rather than assembling a modal out of divs: the behaviour you would otherwise be hand-rolling with `inert` plus a focus trap plus overlay stacking comes for free, and it is the same first-rule-of-ARIA reasoning that applies everywhere in HTML — use the native thing before you reproduce its behaviour. Other genuine uses of the attribute: off-canvas navigation drawers that slide out but remain in the DOM, carousel slides that are rendered but off-screen, and multi-step wizards that keep completed steps visible but frozen. ## What it is not `inert` is not a security boundary and not a substitute for `disabled`. A disabled form control is excluded from form submission and is styleable as disabled; an inert subtree's controls are merely unreachable — their values are still submitted with the form. It also does not hide anything visually. And it is not a replacement for correct focus *placement*: something still has to move focus into the dialog when it opens and back to the trigger when it closes.