The inert attribute

When an overlay is open, the content behind it should be unreachable - not just dimmed. The inert attribute removes a subtree from tab order and the accessibility tree at once, replacing fragile focus-trap JavaScript.

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, and is removed from the accessibility tree; in supporting browsers its text is also skipped by find-in-page. It is defined in the WHATWG HTML Standard and has been Baseline 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.

Modal Focus Trapping & `aria-hidden` vs `inert` Semantics

Managing accessible focus traps across custom modal containers and off-canvas navigation drawers requires contrasting inert with legacy ARIA techniques:

inert vs aria-hidden="true" Semantic Differences: Setting aria-hidden="true" on a container hides the subtree from screen readers but leaves form inputs and links fully focusable via the Tab key. Conversely, inert simultaneously strips focusability, clicks, hover events, pointer events, and screen reader accessibility from the entire DOM subtree.
Native <dialog showModal()> Automatic inert Masking: When a native <dialog> element is opened using .showModal(), the browser automatically marks all surrounding document siblings outside the top layer as inert. You only need to explicitly manage the inert attribute when building custom non-<dialog> overlays or off-canvas drawers.
Visual Styling for Inert Containers (:inert): Pair inert declarations with CSS pointer event and opacity rules (:inert { pointer-events: none; opacity: 0.6; user-select: none; }) to ensure visual presentation matches non-interactive DOM state.

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 - in Chrome and Firefox, text inside an inert subtree is skipped (Safari does not yet honour this, so do not rely on it as the only barrier).

Sources & further reading

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

Add as a preferred source on Google