The HTML aria-hidden attribute
The aria-hidden="true" attribute removes an element and its descendants from the accessibility tree, so screen readers ignore it — while it stays visible on screen. Value: true or false. Never put it on focusable or interactive content.
Overview
The aria-hidden attribute hides an element and its subtree from assistive technology (but not visually).
It is a widget state — a condition that can change as the user interacts. Because ARIA does nothing on its own, you must update this value in JavaScript every time the underlying state changes; a stale state is worse than none. And wherever a native element already expresses the same thing (a checkbox's checked state, the disabled attribute, a <details>'s open state), use that instead.
Like all ARIA, aria-hidden changes only the accessibility tree — what assistive technology perceives — never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<button>Save <svg aria-hidden="true"> … </svg></button>Values
| Value |
|---|
| true | false |
Example
<button>
Delete
<svg aria-hidden="true" viewBox="0 0 24 24" width="14"><path fill="currentColor" d="M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6v12z"/></svg>
</button>Best practices
- Follow the first rule of ARIA — use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Update the value in JavaScript whenever the state changes — keep it in sync with reality.
- Use the matching native state where one exists (a checkbox's
checked, thedisabledattribute, a <details>'s open state) instead of the ARIA version. - Set it only on an element whose role actually supports this state.
Accessibility
Misused aria-hidden is one of the most common accessibility bugs. Hiding interactive content from screen readers while leaving it focusable strands keyboard users on elements that are not announced. Audit for focusable descendants before hiding anything, and prefer inert when you want to disable an entire region.