The `inert` Attribute: Making UI Sections Unreachable
The `inert` attribute makes a part of the DOM non-interactive and inaccessible. It's like a glass pane over a UI section: you can see it, but can't click, focus, or use a screen reader on it. Use it for off-screen menus or inactive dialogs.
WHY IT EXISTS: Web pages often have content that is visually present but should not be interactive, like an off-screen navigation menu or the main page content behind an open modal dialog. Before inert, developers had to manually manage tabindex, ARIA attributes, and event listeners to prevent users from accidentally interacting with these inactive parts, which was complex and error-prone.
THE MENTAL MODEL: Think of inert as a 'Do Not Disturb' sign for a whole section of your HTML. When a container has the inert attribute, the browser ignores all user input events (clicks, focus, etc.) for it and all its descendants. It also hides the content from assistive technologies like screen readers. The content is still visible, just completely non-functional.
HOW IT WORKS: Applying the boolean attribute inert to an element makes the browser treat that entire subtree as non-interactive. Any element inside an inert region cannot be focused, clicked, or selected. It's removed from the tab order, and screen readers will skip over it. This is different from display: none or visibility: hidden, which hide the content visually. With inert, the content is visible but disabled.
WHEN TO USE IT: The primary use case is for content that is temporarily off-screen or obscured but still part of the DOM. Examples include: a slide-out navigation menu that is currently closed, the main page content when a modal dialog is open, or a carousel with non-visible slides. It simplifies accessibility by ensuring focus stays within the active part of the UI.
WHEN NOT TO USE IT: Do not use inert for content that is permanently non-interactive; use the disabled attribute on form controls for that. Don't use it as a replacement for display: none if you want to hide content both visually and functionally. Using inert on a visible, primary part of the UI will just confuse users, as they'll see things they can't interact with.
ONE CANONICAL EXAMPLE: A common scenario is a modal dialog. When the dialog is open, the rest of the page content behind it should be non-interactive. You can achieve this by adding inert to the main content container when the modal opens, and removing it when the modal closes. This prevents users from accidentally tabbing out of the modal and into the background page.
Read the original → html.spec.whatwg.org
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.