Inert Attribute — Making Content Unfocusable With Inert

In this tutorial, you will learn about Inert Attribute. We cover key concepts, practical examples, and best practices to help you master this topic.

The inert attribute makes elements and their descendants unfocusable and invisible to assistive technologies, providing a cleaner alternative to managing tabindex and aria-hidden separately.

In this tutorial, you'll learn Focus Management with the inert attribute.

What You'll Learn

By the end of this lesson, you'll understand what inert does, how to use it for modals and side panels, and browser support considerations.

Why It Matters

Before inert, managing focus outside a modal required manually setting tabindex="-1" on every focusable element and aria-hidden on every element. inert does both in one attribute.

Real-World Use

Doda Browser uses inert on background content when modal dialogs are open, replacing the previous tabindex and aria-hidden management.

Inert Behavior

flowchart LR
  A[inert='true' on container] --> B[All descendants unfocusable]
  A --> C[All descendants removed from accessibility tree]
  A --> D[Text cannot be selected]
  A --> E[Pointer events ignored]
  B --> F[Tab skips all descendants]
  C --> G[Screen readers skip all]

Using inert for Modals

function openModal(modal) {
  // Make background inert
  document.getElementById('page-content').inert = true;

  // Show and focus modal
  modal.hidden = false;
  trapFocus(modal);
}

function closeModal(modal, trigger) {
  // Restore background
  document.getElementById('page-content').inert = false;

  // Hide modal and restore focus
  modal.hidden = true;
  if (trigger) trigger.focus();
}

inert vs Manual Management

<!-- Before inert: multiple attributes needed -->
<main aria-hidden="true">
  <!-- Every focusable element needs tabindex="-1" -->
  <a href="#" tabindex="-1">Link</a>
  <button tabindex="-1">Button</button>
  <input tabindex="-1" />
</main>

<!-- With inert: one attribute replaces all -->
<main inert="true">
  <a href="#">Link</a>
  <button>Button</button>
  <input />
</main>

Browser Support and Polyfill

inert is supported in modern browsers. For older browsers, use a polyfill:

<script src="https://cdn.jsdelivr.net/npm/wicg-inert@3/dist/inert.min.js"></script>

Or check support:

if (!HTMLElement.prototype.hasOwnProperty('inert')) {
  // Load polyfill
}

Common Mistakes

• Using inert on the modal itself: inert goes on the background content, not the modal.
• Not removing inert when the modal closes: Background remains non-interactive.
• Using inert for non-modal content: Only use inert when content should be completely non-interactive.
• Combining inert with aria-hidden redundantly: inert already handles Accessibility tree hiding.
• Not testing with screen readers: Verify inert removes content from the accessibility tree.

Practice and Challenge

1. What does the inert attribute do? Makes an element and its descendants unfocusable and invisible to assistive technologies.

2. How does inert compare to managing tabindex and aria-hidden? inert replaces both with a single attribute, handling all descendants automatically.

3. When should you use inert? When content should be completely non-interactive, such as background content when a modal is open.

4. Do you put inert on the modal or the background? On the background content, not the modal.

5. Challenge: Replace an existing tabindex/aria-hidden modal implementation with the inert attribute.

FAQ

Mini Project

Convert an existing modal dialog implementation from manual tabindex/aria-hidden management to the inert attribute. Test with keyboard and screen reader.

What's Next

Continue to Focus DevTools to learn about browser developer tools for focus debugging.