HTML: aria-hidden

The aria-hidden attribute removes an element and its descendants from the accessibility tree while leaving them visible on screen.

What you will learn

How to hide decorative content from screen readers
Why useful content must remain available
Why focusable elements must not be aria-hidden

Decorative icon example

<button type="button">
  <span aria-hidden="true">★</span>
  Favorite
</button>

The visible star is decorative because the button text already says “Favorite”. The button itself remains available to assistive technology.

Values

<span aria-hidden="true">Decorative</span>
<span aria-hidden="false">Available</span>

Use the string values true and false. The attribute does not change visual display; use the hidden attribute or CSS when content should also disappear visually.

Common mistakes

Never put aria-hidden="true" on a button, link, input, or another focusable element.
Do not hide text that conveys information not available elsewhere.
Do not use aria-hidden to solve a visual layout problem.