HTML reference
hidden
The hidden attribute says that an element is not currently relevant and should not be presented to the user. Remove it when the content becomes relevant.
What you will learn
- What state
hiddenrepresents - How it differs from hiding a submitted form value
- How to reveal content as part of an accessible interaction
Basic example
<section id="details" hidden>
Extra details
</section>
<button type="button" aria-controls="details" aria-expanded="false">
Show details
</button>JavaScript can remove the hidden attribute and update aria-expanded when the button opens the section. The control and the content should have a clear relationship.
Important distinctions
hiddennormally removes content from visual presentation and the accessibility tree. Do not use it for content that should remain available to screen readers.- It is not encryption or security. Do not put secrets in hidden markup.
- For a hidden form field that should be submitted, use
<input type="hidden">; that is a different feature. - For a user-openable disclosure,
<details>and<summary>can provide built-in behavior.