While an element and its descendants with inert are removed from the DOM, they will still be visible! Inert is meant to be applied to obscured elements that should not receive interaction events.
This is especially helpful if you want to "trap" focus to a particular part of your website.
Be aware that it is not the same as display: none and visibility: hidden, though, which makes elements disappear visually.
Explanation
#According to the HTML specs, this is what inert does:
The inert attribute is a boolean attribute that indicates, by its presence, that the element and all its flat tree descendants which don’t otherwise escape inertness (such as modal dialogs) are to be made inert by the user agent.
Translated into human language: An HTML element with the inert attribute becomes inactive, including all the (interactive) elements inside that element. They also go a bit more into detail how it should (and shouldn’t) be used:
An inert subtree should not contain any content or controls which are critical to understanding or using aspects of the page which are not in the inert state.
Don’t use this attribute on a parent element containing information or things like buttons, inputs or links that are important to understand or operate your website when there is no element visually blocking their use.
Content in an inert subtree will not be perceivable by all users, or interactive.
Anything inside an element with the inert cannot be perceived or operated, which is the whole point of it.
Authors should not specify elements as inert unless the content they represent are also visually obscured in some way.
If something is blocked by something or not visible at all, consider using inert. If it cannot be perceived, maybe it should not be operable at all.
In most cases, authors should not specify the inert attribute on individual form controls. In these instances, the disabled attribute is probably more appropriate.
Use inert on elements containing other elements to make larger sections inactive. If you want to disable something like a button, text field, checkbox, or radio button, use the disabled attribute instead (this is a whole topic by itself; see Making Disabled Buttons More Inclusive by Sandrina Pereira).
Use cases
#For me, the most obvious use case would be when moving attention or focus to a dialog that just opened. As long as it is open, information and interactive elements outside of it are not available to the user. Of note, this is the default behaviour of the <dialog> element when using the showModal() method.
Another example: Say you provide a guided tour through your website to learn about different sections and UI elements. To ensure that keyboard users move from A to B to C and so on, you only enable the elements explaining something and the element(s) in question. The rest becomes inert!
Accessibility considerations
#inert is not:
- Meant to disable interactive elements, this is what the
disabledattribute is for. - The same as
visibility: hidden, which only removes it visually but keeps it inside of the DOM. - Used for removing elements visually and from the DOM, like
display: none. Although if referenced from visible elements’aria-describedbyoraria-labelledbyattribute they should still be exposed to assistive technologies.
inert is meant for making an HTML element (and all HTML elements inside of it) inactive, not focusable and ignored in the accessibility tree because the respective element is either partially or fully obscured.
Conclusion
#Use inert on elements that are obscured and not entirely visibly hidden (like with display: none), such as by some type of overlay that is intended to keep keyboard focus while open. This way you can provide a consistent experience for mouse, keyboard and assistive technology users.
Be aware that it is not the same as the disabled attribute or visibility: hidden.