Skip to content

.tip

· one of the small things

inert takes a whole subtree out of the tab order

A drawer that slides in with transform leaves the page behind it in the DOM, so Tab walks into links nobody can see. The inert attribute takes an element and its descendants out of the tab order, out of the accessibility tree and out of the way of clicks.

<main inert={menuOpen}>{children}</main>
<nav aria-label="Menu">{links}</nav>

showModal() on a dialog does this to the rest of the page for you; a drawer or a form region waiting on a request does not. React 19 renders inert as a boolean, so inert={false} writes no attribute at all.

accessibilityfrontend