Detailed answer
Inert prevents a subtree from normal interaction and removes it from sequential focus and the accessibility tree.
It can mark content inactive during a workflow. Remove it when that content becomes usable again. Inert is not necessarily visual hiding, so the design may still need to communicate the inactive state.
Example
<section inert><h2>Unavailable preview</h2><button type="button">Edit</button></section>
Understanding the behavior
Inert prevents interaction with a subtree and removes it from normal focus navigation and the accessibility tree. It can help manage inactive interface regions, but it does not replace server authorization or conceal data in downloaded HTML.
Practical implementation notes
When removing inert, check where keyboard focus should move next. Ensure active controls are never left inside an inert ancestor, and test that visible inactive content is communicated clearly in the interface.
How to check it
Try tabbing and activating its controls while inert is present, then remove inert.
Expected result
The inactive subtree cannot be operated until it is re-enabled.
Watch out: Do not leave the only usable navigation or close control inert.
Read the reference ↗