The HTML inert global attribute makes an element and its descendants non-interactive. Buttons cannot be clicked, form controls cannot receive focus, editable content cannot be edited, and the content is removed from the accessibility tree.
Use inert when a visible section must temporarily stop accepting interaction, such as background content behind a custom modal, an inactive form step, or an unavailable panel.
inert has no default visual appearance. Always give users a clear indication when a section becomes unavailable.
How the inert Attribute Works
inert is Boolean. Its presence activates the behavior, regardless of its written value. The effect applies to the element and its flat-tree descendants.
- Descendants leave the tab order and cannot receive focus.
- Click and focus events do not fire for inert controls.
- Text cannot normally be selected or found with find-in-page.
- Assistive technologies do not expose the inert subtree.
HTML inert Syntax
Syntax:
<!-- This section is temporarily inactive -->
<section inert>
<button>Save</button>
</section>Remove the attribute to restore interaction. Writing inert="false" still leaves the Boolean attribute present and active.
Controlling inert with JavaScript
Every HTML element exposes an inert DOM property. Set it when interface state changes.
Example:
// Disable the panel and later restore it
const panel = document.querySelector("#account-panel");
panel.inert = true;
panel.inert = false;The complete example toggles a fieldset. Try the Tab key before and after activating the inert state.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML inert Attribute Demo</title>
<style>
body { max-width: 680px; margin: 2rem auto; padding: 0 1rem; font-family: Arial, sans-serif; line-height: 1.6; }
fieldset { margin: 1rem 0; padding: 1rem; border: 2px solid #1769aa; }
fieldset[inert] { opacity: 0.45; background: #eee; }
button { padding: 0.6rem 1rem; cursor: pointer; }
</style>
</head>
<body>
<h1>Toggle an Inert Section</h1>
<button type="button" id="toggle" aria-pressed="false">Make account form inert</button>
<fieldset id="account">
<legend>Account details</legend>
<label>Name <input value="Aarav"></label>
<button type="button">Save account</button>
</fieldset>
<p id="status" aria-live="polite">The form is interactive.</p>
<script>
// Toggle the DOM inert property for the complete form section.
const toggle = document.querySelector('#toggle');
const account = document.querySelector('#account');
const status = document.querySelector('#status');
toggle.addEventListener('click', () => {
account.inert = !account.inert;
toggle.setAttribute('aria-pressed', String(account.inert));
toggle.textContent = account.inert ? 'Restore account form' : 'Make account form inert';
status.textContent = account.inert ? 'The form is inert.' : 'The form is interactive.';
});
</script>
</body>
</html>
inert, disabled, and aria-hidden
disabled applies to supported form controls, not an arbitrary section. aria-hidden hides content from accessibility APIs but does not prevent clicks or keyboard focus. inert coordinates interaction, focus, selection, and accessibility behavior for a whole subtree.
Using inert with Dialogs
A modal dialog opened with showModal() makes the rest of the document inert automatically. A modal dialog can escape inherited inertness; ordinary descendants cannot.
Accessibility Best Practices
- Move focus before making the current section inert.
- Style unavailable content clearly.
- Restore focus logically when content becomes active.
- Do not use inert merely to hide essential information.
- Test mouse, keyboard, screen-reader, and find behavior.
Browser Support
The attribute has worked across current major browsers since April 2023. For older browsers, use a maintained polyfill and test focus behavior.
Conclusion
The HTML inert attribute provides one coordinated way to pause an entire section. Apply it only while content is unavailable, show a clear visual state, and manage focus deliberately.