Simplifying focus and interaction control with inert

Managing user interaction with HTML elements traditionally requires juggling focus states, click handlers, and accessibility attributes. The global inert attribute simplifies this by letting you remove an entire subtree from user input events, including focus and events from assistive technologies.

This isn't a new concept for web users. When you open a modal dialog with showModal, the rest of the page behind it becomes inert by default; you can't click links or tab to buttons outside the dialog. The inert attribute gives you the same behavior for any element you choose.

Inert means lacking the ability to move or act. Marking a DOM element as inert removes its ability to be interacted with by the user or discovered by assistive technologies.

Consider the following structure:

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Here, inert is applied to the second <div>, so its button and label cannot receive focus or be clicked. The attribute also removes the subtree from the accessibility tree, ensuring assistive technologies do not present the content.

The accessibility payoff

The Web Content Accessibility Guidelines (WCAG) emphasize the importance of a logical focus order and focus management. Historically, hiding content from assistive technologies was straightforward with aria-hidden="true", but this approach does nothing to prevent keyboard interaction. You can hide a button from a screen reader but still allow a user to tab to it, creating a confusing and broken experience.

The inert attribute addresses this by controlling both discoverability and interactivity at once, enabling more robust and usable patterns. Two common scenarios highlight its value:

  • Elements present in the DOM but positioned offscreen or visually hidden.
  • Elements present in the DOM that are visible yet intentionally non-interactive during certain states.

Handling offscreen content

For components like side drawers or off-canvas menus, the content is frequently present in the DOM but hidden from view. Without protection, a keyboard user can unintentionally tab into this invisible content. Applying inert to the offscreen container prevents those accidental interactions.

Managing non-interactive states

A form that is submitting, a UI rendering on page load, or a dialog overlay blocking the view are all examples where visible content should not be interactive. In these states, focus should be constrained to the active portion of the interface, guiding the user appropriately.

Why focus trapping matters

Trapping focus is not about restricting users; it's about creating a clear, understandable interaction model. Without this, a screen reader user might navigate past an open modal and interact with underlying content, or accidentally resubmit a form while the first request is processing. Using inert confines the interactive and discoverable content to the active layer.

This is particularly effective for:

  • Modal dialogs, nontransparent menus, or side navigation panels.
  • Carousels where only the current slide should be interactive.
  • Form sections that are disabled contextually, such as shipping address fields when "Same as billing address" is checked.
  • Disabling an entire interface while it is in an inconsistent state, such as during initial data fetch.

Making inert state visible

The inert attribute comes with no default visual style. If an entire section of the UI is inactive, you should make that clear to all users. Users of screen readers, magnifiers, or small viewports may not see the active part of the page and could be confused by sections they can't interact with.

You can indicate the state with CSS:

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

Remember that inert is generally for sections of the page. For a single form control that should not be interactive, the native disabled attribute remains a better fit.

What interaction ceases?

By default, inert blocks click and focus events. For assistive technologies, the element is also removed from the tab order and the accessibility tree. Browser support may also treat the content as non-selectable and skip it during in-page search. The attribute's default value is false.