Intermediate LevelHTML & Semantic Web
How does the HTML inert attribute disable DOM subtrees for user interaction and accessibility?
❓ Interview Prompt: Explain inert attribute, disabling click/touch events, removing subtrees from tab order and accessibility tree.
The global 'inert' HTML attribute instructs the browser to completely disable a DOM subtree and all its children:
Behavior when 'inert' is present:
1
Blocks all click, pointer, and touch events.
2
Removes all interactive children from keyboard tab order.
3
Hides the subtree completely from the Accessibility Tree!
Ideal for freezing background page content when a custom modal is active.
Code Implementation Example
html
<!-- Background page disabled while modal is open -->
<div inert id="main-page-wrapper">
<button onclick="doSomething()">Disabled Button</button>
</div>💡Disabling background page subtrees using the HTML inert attribute.
🎯 Interview Key Takeaway
Use the inert attribute to freeze background DOM subtrees during modal dialog interactions.
#inert#Accessibility#DOM Subtree#Intermediate
Back to all HTML & Semantic Web Questions→