HTML inert Global Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The inert attribute in HTML is a global attribute that you can use with any element. It essentially makes that element and all its content inactive, meaning users can't interact with it and assistive technologies like screen readers will ignore it.

Here's a breakdown of what inert does:

  • Stops user interaction: Clicking, focusing, or other actions on the element won't trigger any events.
  • Hides from assistive tech: Screen readers and other tools won't announce or navigate to the inert content.
  • Removes from accessibility tree: The element is excluded from the accessibility tree, which helps assistive technologies understand the page structure.

Think of inert as a way to temporarily turn off a section of your webpage. It's useful for things like:

  • Modal windows: When a modal window is open, you can make the rest of the page inert to prevent users from accidentally interacting with it.
  • Content that's loading or disabled: You can use inert on content that's still loading or is currently unavailable.
  • Decorative elements: For elements that are purely visual and don't serve an interactive purpose, inert can help ensure they don't confuse assistive technologies.

It's important to note that inert is generally used for larger sections of content. For individual controls that you want to disable, consider using the disabled attribute along with CSS styling for the disabled state.

Syntax

<element inert>

Values

  • No Values

Example

    <style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 60px;
}

.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>

<!-- Main content -->
<div id="mainContent">
<h2>Main Content of the Page</h2>
<p>This content will become non-interactive when the modal is open.</p>
<button id="openModalBtn">Open Modal</button>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Modal Dialog</h2>
<p>This is a simple modal. You can interact with this content, but not with the main page behind it.</p>
</div>
</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("openModalBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal and make main content inert
btn.onclick = function() {
modal.style.display = "block";
document.getElementById("mainContent").setAttribute("inert", "");
}

// When the user clicks on <span> (x), close the modal and remove inert from main content
span.onclick = function() {
modal.style.display = "none";
document.getElementById("mainContent").removeAttribute("inert");
}
</script>

Browser Support

The following table will show you the current browser support for the HTML inert Global Attribute.

Desktop
Edge Chrome Firefox Opera Safari
1021021128815.5
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
1021127015.590102

Last updated by CSSPortal on: 24th March 2024