Overview

The inert HTML attribute is one of the most impactful accessibility additions to the web platform. When applied to an element, inert makes the entire subtree unfocusable, unclickable, and invisible to assistive technology — all with a single attribute. Before inert, creating a modal overlay required manually setting aria-hidden="true" on every sibling, trapping focus with JavaScript, and preventing click-through with overlay hacks. A single inert attribute replaces all of that. The native <dialog> element’s showModal() method applies inert behavior to the rest of the page automatically, making it the preferred approach for modal dialogs.

WCAG Criteria:

• 2.1.1 Keyboard  — all functionality must be operable through a keyboard interface; background content behind a modal must not be keyboard-reachable
• 4.1.2 Name, Role, Value  — user interface components must communicate their state to assistive technology; inert content should be hidden from the accessibility tree

Key requirements:

• Background content behind modals must be unreachable by keyboard (Tab must not escape the modal)
• Background content must be hidden from screen readers while a modal is open
• The inert attribute makes an entire subtree unfocusable, unclickable, and invisible to assistive technology
• inert has 96%+ browser support and no polyfill is needed for modern browsers
• <dialog>.showModal() applies inert to the rest of the page automatically
• inert replaces manual aria-hidden + tabindex="-1" manipulation on every interactive element

Background Content Isolation

<!-- Modal overlay without inert — background is still interactive -->
<div id="main-content">
  <a href="/home">Home link</a>
  <a href="/about">About link</a>
  <button onclick="openModal()">Open Modal</button>
</div>
 
<!-- Overlay only blocks clicks visually, not keyboard or screen reader -->
<div class="modal-overlay">
  <div class="modal">
    <p>Modal Dialog</p>
    <button>Confirm</button>
    <button>Cancel</button>
  </div>
</div>
<!-- Tab still reaches "Home link" and "About link" behind the overlay -->

<!-- Background content made inert when modal opens -->
<div id="main-content" inert>
  <a href="/home">Home link</a>
  <a href="/about">About link</a>
  <button onclick="openModal()">Open Modal</button>
</div>
 
<div class="modal-overlay" role="dialog" aria-modal="true"
     aria-label="Confirmation dialog">
  <div class="modal">
    <p>Modal Dialog</p>
    <button>Confirm</button>
    <button>Cancel</button>
  </div>
</div>
 
<script>
  function openModal() {
    document.getElementById('main-content')
      .setAttribute('inert', '');
    // Focus first interactive element in modal
  }
  function closeModal() {
    document.getElementById('main-content')
      .removeAttribute('inert');
    // Return focus to trigger button
  }
</script>

What’s wrong with the leaky modal?

• Background links and buttons are still reachable via Tab even though an overlay is visually covering them
• Screen readers can navigate to and interact with background content while the modal is open
• Mouse users can sometimes click through overlays depending on CSS stacking and pointer events
• Without aria-modal="true" or inert, assistive technology has no way to know that background content is meant to be blocked

What the inert attribute provides:

• Every descendant of the inert element is removed from the tab order — Tab cannot reach them
• Every descendant is removed from the accessibility tree — screen readers cannot navigate to them
• Click events are blocked on all descendants — pointer interaction is fully disabled
• A single attribute replaces what previously required aria-hidden="true" on siblings, tabindex="-1" on every focusable element, and a click-blocking overlay
• When the modal closes, removing the inert attribute restores all original behavior instantly

What the screen reader announces:

inert vs. manual approaches:

Resources

• MDN — HTMLElement: inert property 
• MDN — HTML inert attribute 
• Chrome Developers — Introducing inert 
• WCAG 2.1.1 — Keyboard 
• WCAG 4.1.2 — Name, Role, Value 
• WAI-ARIA Authoring Practices — Dialog (Modal)