The inert attribute

What it is

inert is a boolean global attribute that makes an element and all of its descendants non-interactive. An inert subtree cannot receive focus, cannot be clicked, is skipped by the tab order, is removed from the accessibility tree, and is ignored by find-in-page. It is defined in the WHATWG HTML Standard and has been Baseline Widely Available across browsers since April 2023.

The canonical use is managing background content. When a modal dialog, slide-out menu, or off-canvas panel is open, everything behind it should be genuinely unreachable — not merely greyed out, but inert to the keyboard and to assistive technology.

Why it matters

Before inert, keeping focus inside an open dialog meant fragile scripting: trapping the Tab key, tracking the first and last focusable element, and toggling tabindex="-1" plus aria-hidden on every background node — then undoing it all on close. Miss one path and a keyboard user tabs out of the dialog into hidden content they cannot see. That is a focus-order failure (WCAG 2.4.3) and a likely keyboard trap.

inert collapses that into one declarative attribute. It removes the subtree from the tab order and the accessibility tree together, so keyboard and screen-reader users get the same boundary the visual design implies.

How to implement

Mark the container that should become unreachable, and clear it when the content is active again:

<main inert>
  <!-- page content, unreachable while the overlay is open -->
</main>
<div role="dialog" aria-modal="true">
  <!-- focusable overlay content -->
</div>

• A modal <dialog> opened with showModal() makes the rest of the document inert automatically — you do not need to set the attribute yourself. Reach for inert on non-<dialog> patterns: custom menus, off-screen navigation, multi-step panels.
• Obscure inert content visually (a backdrop or dimming) so sighted users are not confused by content they cannot use. The spec asks authors to do this.
• Toggle it from script as state changes: el.inert = true.
• Use disabled, not inert, to switch off an individual form control.

Common mistakes

• Using aria-hidden alone for background content — it hides from screen readers but leaves elements focusable, so keyboard focus still escapes.
• Marking content inert while leaving it fully visible and undimmed.
• Forgetting to remove inert when the overlay closes, stranding the whole page.
• Applying inert to the dialog itself instead of to the background.

Verification

• Open each overlay and press Tab repeatedly: focus must cycle only within the active region and never reach a background control.
• With a screen reader running, background landmarks and headings should not be announced while the overlay is open.
• Use find-in-page — text inside an inert subtree must not be found.

Related topics

• Keyboard navigation
• Visible focus indicators
• Skip links
• Native interactive elements

Sources & further reading

• HTML Standard — The inert attribute — WHATWG
• ARIA Authoring Practices Guide — Dialog (Modal) Pattern — W3C
• MDN — inert — MDN