The inert global attribute is a Boolean attribute indicating that the browser will ignore the element. With the inert attribute, all of the element's flat tree descendants (such as modal <dialog>s) that don't otherwise escape inertness are ignored. The inert attribute also makes the browser ignore input events sent by the user, including focus-related events and events from assistive technologies.
Specifically, inert does the following:
- Prevents the
clickevent from being fired when the user clicks on the element. - Prevents the
focusevent from being raised by preventing the element from gaining focus. - Hides the element and its content from assistive technologies by excluding them from the accessibility tree.
html
<body inert> <!-- content --> </body>
The inert attribute can be added to sections of content that should not be interactive. When an element is inert, it along with all of the element's descendants, including normally interactive elements such as links, buttons, and form controls are disabled because they cannot receive focus or be clicked.
The inert attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree.