HTML inert Global Attribute
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">×</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 | |||||
102 | 102 | 112 | 88 | 15.5 |
Tablets / Mobile | |||||
102 | 112 | 70 | 15.5 | 90 | 102 |
Last updated by CSSPortal on: 24th March 2024