How the Inert Attribute Improves Modal Accessibility

The HTML inert attribute significantly streamlines web accessibility by providing a native, declarative way to disable interaction and hide background content from assistive technologies. When implementing modal dialogs, developers traditionally relied on brittle, custom JavaScript solutions to keep keyboard focus inside the modal and hide the remaining page from screen readers. By applying the inert attribute to non-modal elements, developers can automatically trap focus, prevent pointer events, and remove background nodes from the accessibility tree with minimal code.

The Traditional Focus Trap Challenge

Historically, creating an accessible modal required complex JavaScript to satisfy two major Web Content Accessibility Guidelines (WCAG) requirements:

  1. Focus Trapping: Ensuring keyboard users pressing Tab or Shift + Tab cycle only through focusable elements inside the modal, rather than tabbing into the background page.
  2. Hiding Inactive Content: Applying aria-hidden="true" to every top-level background container so screen reader users do not read or interact with the content behind the modal overlay.

Custom focus traps often fail at edge cases. Developers must track the first and last focusable elements, dynamically manage tabindex, handle DOM mutations, and intercept keydown events. Furthermore, aria-hidden="true" only stops screen readers; it does not stop keyboard navigation by itself, requiring synchronized application of both attributes and listeners.

How the inert Attribute Works

The inert boolean attribute tells the browser to treat a specific DOM subtree as if it does not exist for user input and accessibility tools. When placed on an element:

  • Pointer and Selection Events are Blocked: Users cannot click, touch, hover, or select text within the element.
  • Focus is Removed: All focusable descendants (links, buttons, form controls) are removed from the sequential focus navigation order, functioning as if they have tabindex="-1".
  • Accessibility Tree Removal: The element and its children are completely hidden from assistive technologies, mirroring the behavior of aria-hidden="true".

Implementing inert with Modals

Using inert simplifies the modal workflow by shifting the focus management logic to the background wrapper instead of the modal itself.

Consider a standard HTML layout where your application is divided into the main content and the modal container:

<body>
  <div id="main-content">
    <!-- Header, navigation, and page content -->
    <button id="open-modal">Open Settings</button>
  </div>

  <div id="modal" role="dialog" aria-modal="true" hidden>
    <h2>Settings</h2>
    <button id="close-modal">Close</button>
  </div>
</body>

When the modal opens, you apply the inert attribute to #main-content:

const mainContent = document.getElementById('main-content');
const modal = document.getElementById('modal');

function openModal() {
  modal.removeAttribute('hidden');
  mainContent.setAttribute('inert', '');
  document.getElementById('close-modal').focus();
}

function closeModal() {
  modal.setAttribute('hidden', '');
  mainContent.removeAttribute('inert');
  document.getElementById('open-modal').focus();
}

Because #main-content is marked as inert, the browser natively prevents keyboard focus and pointer interactions from reaching anything inside it. The user can only navigate elements within the active #modal.

Key Accessibility Benefits

  • No Keyboard Leaks: Because the background elements are natively unfocusable, keyboard focus naturally wraps within the available interactive elements of the modal without custom keydown listeners.
  • Screen Reader Parity: Users navigating via touch exploration or virtual screen reader cursors cannot accidentally escape into the background content, preventing confusion.
  • Less Code, Fewer Bugs: Replacing hundreds of lines of custom focus-trapping scripts with a single DOM attribute reduces bundle sizes and eliminates bugs related to dynamic DOM updates.
  • Native Platform Consistency: inert is supported across all modern evergreen browsers, ensuring uniform behavior across different devices and assistive tools without polyfills.