A section the page cannot reach
Caveatinert removes the subtree from focus order and from the accessibility tree, which pointer-events: none and disabled do not. Do not add it around an open modal: showModal() already inerts the rest of the page, and doing both can strand focus.
FallbackIt carries no styling of its own, so dim it yourself with [inert]. Where unsupported the controls stay reachable — degraded, but never invisible to a screen reader while visible on screen.
<fieldset inert>…</fieldset>
/* inert paints nothing, say so yourself */
[inert] { opacity: .35; }Published
Questions
What is the difference between inert and aria-hidden?
aria-hidden="true" only removes content from the accessibility tree, so a button inside it can still take keyboard focus and be clicked. inert does that and also blocks focus, clicks and text selection for the whole subtree.
Does the inert attribute grey out the content?
No. It changes behaviour and leaves painting alone, so an inert section looks exactly as clickable as before. Add a rule such as [inert] { opacity: .35; } so sighted users can tell why nothing responds.
How do I toggle inert with JavaScript?
Set the boolean property: el.inert = true to lock a section and el.inert = false to release it. It reflects the attribute, so toggleAttribute('inert') works too, and your [inert] styles follow automatically.