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

HTML

    <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>