Standards · ARIA

State Global state

aria-hidden

Removes an element and all its descendants from the accessibility tree. Sighted users still see the element; assistive technology never reaches it. Reserve for decorative content; never apply to a focusable control.

When to use

On decorative content that adds nothing for screen-reader users — usually icons that already sit next to a text label, dividers, background graphics, or duplicated text that exists purely for layout. Marking those elements aria-hidden="true" keeps the accessibility tree focused on meaningful content.

Compared with similar mechanisms:

  • aria-hidden="true" — visible to sighted users, invisible to assistive technology. Element keeps taking layout space.
  • CSS display: none and the HTML hidden attribute — invisible to everyone (sighted users and assistive technology). The element is not rendered at all.
  • CSS visibility: hidden — invisible to everyone but the element still occupies layout space.
  • The inert attribute — element and descendants are unfocusable, click events are suppressed, but they remain in the accessibility tree (unlike aria-hidden). The right tool for modal backdrops and routed-out screens.

Critically, never apply aria-hidden="true" to an element that is — or contains — a focusable control. Keyboard users can still tab to it, but their screen reader will not announce it. They land on an invisible-to-them control. This is one of the most common axe-core failures.

How to keep it in sync

Valid values are "true", "false", and "undefined". The useful one is "true"; "false" exists to override an ancestor aria-hidden, which is almost never needed in practice.

The state can be static (an icon that is always decorative) or dynamic. If you toggle aria-hidden on a region — for example, hiding the main app while a modal is open — synchronise it with the actual visual state and pair it with inert so the region is also unfocusable.

Common failures

  • aria-hidden="true" on a focusable element — the most-reported axe-core issue.
  • Using aria-hidden to hide visible text that you wish screen readers wouldn’t read. Either remove the text or move it out of the DOM.
  • Forgetting aria-hidden="true" on a purely decorative icon next to a labelled button — the screen reader announces the icon’s accessible name in addition to the button label.
  • Setting aria-hidden="true" on the <body> or <main> element to lock background content behind a modal, without also using inert — keyboard focus can still escape.
  • Using aria-hidden="false" to “show” something hidden by CSS. The CSS still hides it.

Example

<button type="button">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg>
  Save
</button>