Inert Backdrop

title: "Inert Backdrop — Making Background Content Non-Interactive" description: "Learn how to use the HTML inert attribute to make background content non-interactive when a modal is open, preventing accidental interaction." weight: 10 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, modals]

The inert attribute makes elements non-interactive and invisible to assistive technologies, ideal for marking background content during modal display.

## What You'll Learn

How the inert attribute works, how to use it with modals, and how it compares to other background isolation techniques.

## Why It Matters

When a modal is open, background content should not be clickable or focusable. The inert attribute handles this natively without custom JavaScript.

## Real-World Use

A modal opens. The main page content has the inert attribute. Keyboard focus cannot reach background links or buttons. Screen readers skip background content entirely.

## Inert Implementation

```html
<div id="page-content">
  <!-- All page content -->
  <a href="/">Home</a>
  <button>Click me</button>
</div>

<div role="dialog" aria-modal="true">
  <!-- Modal content -->
</div>

const pageContent = document.getElementById('page-content');
const modal = document.querySelector('[role=dialog]');

function openModal() {
  pageContent.inert = true;
  modal.style.display = 'block';
  setInitialFocus(modal);
}

function closeModal() {
  pageContent.inert = false;
  modal.style.display = 'none';
  returnFocus();
}

Combining with aria-modal

<div id="main-wrapper">
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</div>

<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Dialog title</h2>
  <!-- modal content -->
</div>

Common Mistakes

1. inert on the wrong element

Set inert on the direct parent container of all background content, not on individual elements.

2. Not removing inert on close

If inert is not removed, the page remains non-interactive after the modal closes.

3. Relying only on inert for focus trap

inert prevents focus but does not trap focus. You still need a focus trap for cycling within the modal.

4. inert on body element

Setting inert on body may cause unexpected behavior with other scripts. Use a wrapper div instead.

5. Browser support confusion

inert is supported in all modern browsers since 2022. Check support if targeting older browsers.

Practice Questions

1. What does the inert attribute do? It makes an element non-interactive: no focus, no clicks, and hidden from the accessibility tree.

2. How is inert different from aria-modal? inert actually prevents interaction. aria-modal is a hint to screen readers. Using both is the best approach.

3. Where should inert be set when a modal opens? On the container element that wraps all page content outside the modal.

Challenge: Implement a modal that uses both inert on the background and a focus trap inside the modal.

FAQ

Mini Project

Add inert support to a modal component. When the modal opens, set inert on the page wrapper. When it closes, remove inert. Test that background content is not interactive.

What's Next

Learn about Dialog ARIA Labelledby and Describedby for properly naming and describing dialog content.