Recipe

The inert attribute

Remove interactive elements from the accessibility tree and focus order without hiding them visually.

The inert attribute is a boolean HTML attribute that tells the browser to ignore the element and all its descendants for user interaction, focus management, and assistive technology.

<div inert>
  <button>Can't click me</button>
  <a href="/">Can't tab here</a>
</div>

When to use it

Modal dialogs — mark background content inert while open.
Slide-out drawers — prevent focus leaking behind the panel.
Loading states — disable interaction without a spinner overlay.
Carousel off-screen slides — keep them in DOM but unreachable.

Why not display:none?

display: none removes the element from layout and the accessibility tree entirely. inert keeps the element visible and in layout — it just becomes non-interactive. This preserves the visual context while preventing accidental interaction.

Browser support

Inert is supported in all modern browsers. Chrome 102+, Firefox 112+, Safari 15.5+, and Edge 102+ ship it natively. For older browsers, the wicg-inert polyfill bridges the gap.

Accessibility win: Screen readers skip inert content automatically. No aria-hidden hacks, no manual focus trapping — the platform handles it.