The HTML inert attribute: How to make an area inactive for a more accessible navigation
Creating a modern website often requires displaying overlapping elements, such as pop-up windows (modals) or slide-out menus. But one question remains: how can you be sure that the user won’t click on a button left “behind” or navigate with their keyboard in an area they can no longer see?
For a long time, this simple task was a nightmare for developers. It required writing very long and complicated
JavaScript scripts to prevent the cursor from moving anywhere. Today, there is a much simpler solution built directly
into the HTML language: the inert attribute.
In this guide, we will see how this tiny tool makes your sites faster, lighter, and above all, much simpler to use for people with disabilities.
What exactly is the inert attribute?
The word “inert” means something that does not move or act. In web programming, when you add the inert attribute to a
part of your page (a div, a section, or a main), you tell the browser to consider that this area no longer exists
for the user.
It is not just a visual change. It is a deep “sleep mode” for the element. Here are the three main effects it produces immediately:
- No more clicking: Any links, buttons, or forms in the area become impossible to click with a mouse or touch on a
- touchscreen.
- The keyboard ignores it: If a user uses the “Tab” key to move from one link to another, the browser will
- directly skip the entire part marked as
inert. This is a huge help for people with motor difficulties. - Screen readers stay silent: Software used by blind people completely ignores the content of the area. This
- prevents reading information that is not relevant at that moment.
A radically simple approach
Unlike old methods that required modifying every button one by one, inert applies to a parent. If you set a box to
“inert,” everything inside it automatically becomes inert as well. This is called “shorthand” or “cascade” propagation.
Why is it a revolution for accessibility?
For a user who sees well and uses a mouse, it is easy to understand not to click on what is behind an open window. But for a person with a disability, the situation is different.
Protecting the user from “navigation errors”
Imagine a blind person opening a navigation menu on their smartphone. If the developer hasn’t made the rest of the page inactive, the screen reader will continue to suggest links from the footer or articles in the background, even though the menu is still open. The user feels lost and no longer knows where they are on the site.
By using inert, you create a kind of “safety barrier.” You guide the user so they stay focused on the important action
of the moment (filling out a form, choosing an option in a menu) without risking leaving that area by mistake.
Simplifying keyboard usage
Many people use the keyboard instead of the mouse, either by habit or necessity (motor disability). Without the inert
attribute, these users sometimes have to press the “Tab” key 50 times to cross an entire page before reaching the
“Close” button of a window. With inert, you remove all unnecessary obstacles. Navigation becomes fluid and natural.
How to use ‘inert’ in your code?
One of the greatest advantages of this solution is its technical simplicity. You don’t need to be a programming expert to use it.
Practical example: the modal window
This is the most common case. Here is how to structure your page so it works perfectly:
<body>
<!-- Wrap all main content in a div -->
<div id=main-content>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
<!-- The window that pops up on top -->
<div id=my-modal-window role=dialog aria-modal=true>
<button onclick="close()">Close</button>
<p>This is important information.</p>
</div>
</body>
When you display the window, you simply add the attribute to the area you want to make inactive:
document.getElementById('main-content').setAttribute('inert', '');
And when you close the window, you remove the attribute:
document.getElementById('main-content').removeAttribute('inert');
In a single line of code, you have solved all the interactivity problems on your page.
Inert vs aria-hidden: don’t get them confused anymore
This is a very common confusion during development. Many sites use aria-hidden="true". It is a good intention, but
it is incomplete.
aria-hidden="true": Tells the screen reader not to read the area. But the user can still click on it or access- it with the Tab key on their keyboard. This is very confusing because you can interact with something that isn’t being
- announced.
inert: Blocks everything at the same time. Mouse, keyboard, and voice. It is the complete solution.
Performance and eco-design: code less to do more
On this blog, I often talk about performance and respect for the digital environment (eco-design). The inert
attribute is an excellent example of this philosophy.
Reducing page weight
Previously, to manage navigation blocking, we downloaded JavaScript libraries (like focus-trap) that weighed several
dozen kilobytes. Multiplied by millions of visitors, this represents significant energy consumption for servers and
networks.
By using a native browser function, you remove these useless files. Your site loads faster, which improves your LCP (Largest Contentful Paint) score. For Google, this is a positive signal that can help your SEO.
Less work for the user’s computer
Every script running in a browser consumes battery on a smartphone. inert is handled directly by the browser engine
(in very fast C++ language). It is much more energy-efficient than a JavaScript script that monitors every mouse
movement or every key press.
A word on compatibility (Baseline 2024)
For a few years, inert was an experimental novelty. That is no longer the case. Since 2024, it has been part of what
is called the “Baseline.” This means all modern browsers (Chrome, Firefox, Safari, Edge) support it perfectly.
If you still need to support very old browsers (which is increasingly rare), light “polyfills” (backup scripts) exist, but for 96% of internet users, this will work natively without any extra effort on your part.
Design tip: stylizing inactive zones
To improve the user experience (UX), it is recommended to visually show that the background content is no longer
available. You can use the inert attribute as a selector in your CSS file:
/* Reduce visibility of everything that is inert */
[inert] {
opacity : .4;
filter : blur(2px);
user-select : none;
pointer-events : none;
}
This way, the user immediately understands, at a glance, that they must focus on the active window. It’s an elegant way to marry design and technology.
Conclusion: Toward responsible code craftsmanship
Adopting the inert attribute is not just about saving the developer time. It is a sign of respect toward users. By
choosing native and lightweight solutions, we build a web that leaves no one behind, whether they are people with
disabilities or users with slow internet connections.
In 2026, the quality of a site is no longer measured by the complexity of its scripts, but by the relevance of its
technical choices. Use inert, simplify your code, and make accessibility a strength for your project.
Frequently Asked Questions
Does the inert attribute also block forms?
Yes. If you applyinert to a form, the user will no longer be able to fill in fields or click the submit
button. This is very useful for preventing double form submission during loading.
Can I set the 'body' element to inert?
Technically yes, but it is discouraged because it would block absolutely the entire site, including the window you are trying to display. It is better to target a container that holds everything except your modal window.Does Google see inert content?
Yes. Search engine bots still read the HTML code.inert does not prevent the indexing of content; it only
prevents human interaction.
