Purpose and content model
Hidden indicates content that should not be presented in the current state, while inert makes a subtree unavailable for normal interaction and accessibility navigation. They are not interchangeable with an arbitrary opacity or visual overlay. Choose the state according to whether the content should be absent, temporarily inactive, or visible but disabled.
An inert region remains in the document and can remain visually present. A hidden region is normally not rendered. Neither attribute is an access-control mechanism: the content remains available in the page source and can be inspected or modified by a client.
Syntax and working example
<p id="saved-message" hidden>Your draft has been saved.</p>
<script>document.querySelector("#saved-message").hidden = false;</script>Supported attributes and behavior
Hidden has the ordinary hidden state and the until-found state, whose behavior is designed to cooperate with find-in-page and fragment navigation in supporting browsers. Inert is boolean. Setting inert=false still enables it by presence. CSS can interact with rendering of hidden content, so avoid a broad display rule that unintentionally overrides the desired hidden state. Modal dialog behavior uses inertness for the rest of the page through browser mechanisms.
Another practical pattern
<section inert aria-label="Preview of the next step">
<h2>Payment details</h2><button type="button">Continue</button>
</section>Accessibility and browser notes
Do not hide a focused control without moving focus to a sensible place. Inert content is removed from normal interaction, so an inactive preview needs an explanation outside the inert region. A visible disabled-looking region without actual inertness can still trap or confuse keyboard users.
Common mistakes
Opacity:0 does not remove focusable controls from the tab sequence. Aria-hidden alone does not prevent keyboard focus or pointer interaction. Hidden data is not secret, and inert is not a way to secure a privileged action. Verify support for until-found separately.
Verify your implementation
Tab through each interface state and confirm that unavailable controls cannot be reached. Use find-in-page and direct fragment navigation if until-found is used. Test state changes while focus is inside or near the region and inspect what assistive technology announces.
Standard status and sources
Standard; browser availability must be checked independently of specification status.