What is aria-hidden?

The aria-hidden attribute is a WAI-ARIA state that removes an element, and all of its child elements, from the accessibility tree – the structure browsers build so screen readers and other assistive technologies can read a web page. Setting aria-hidden="true" hides purely decorative content and duplicated content, along with collapsed content sitting offscreen, from assistive technology users, without visually hiding any of it for sighted users.

At a glance

Why is aria-hidden important when it comes to accessibility?

Every element you create on a web page can end up in two different places: the visual layout that sighted users see, and the accessibility tree that assistive technologies read from instead.

Most of the time, those two views should match. But some HTML elements exist purely for visual polish, and reading them out loud adds noise rather than meaning.

Think of decorative icons sitting next to a text link, or a repeated arrow graphic on every card in a grid of blog posts. A sighted user skims past these without a second thought. A screen reader user, unless the aria-hidden attribute is applied, hears every one of them announced in full: "arrow, arrow, arrow, arrow."

Anyone building websites with icon fonts, inline SVGs, emoji, or repeated text encounters this situation eventually, but the fix is usually the same: hide the icon, keep the same information available through the visible text next to it.

Used correctly, the aria-hidden attribute keeps the accessibility tree focused on what screen reader users actually need, cutting out the clutter that sighted users tune out already. Used incorrectly – particularly on links, buttons, form controls, and other interactive elements – it can break Web Content Accessibility Guidelines (WCAG) requirements that user interface components remain usable by assistive technology.

Either way, the goal is to remove noise without removing functionality.

How does aria-hidden work?

aria-hidden accepts a small set of values:

• aria-hidden="true" removes the element and its children from the accessibility tree entirely, so assistive technologies ignore it completely.
• aria-hidden="false" is meant to expose the element, but browser support is inconsistent and its use isn't recommended – remove the attribute instead.
• Left unset. The element's hidden state is programmatically determined by user agents based on whether it's actually rendered on the page.

The attribute is inherited, and this is true of aria-hidden elements at any depth. Add it to a parent container, and every child element underneath inherits the same hidden state, whether or not those children carry their own aria-hidden value in their own HTML attribute.

Due to this inheritance, nothing set further down the tree can override an ancestor's aria-hidden="true".

Note: aria-hidden="true" should never be added to a focusable element, or to any element that contains one. As the hidden state is inherited, wrapping a button or a link in a hidden container hides the child's accessible name from screen readers, while the child stays reachable by keyboard.

That mismatch is disorienting to screen reader users, who tab onto a control they can't hear announced, with no way to tell what it does. Different browsers and screen readers try to error-correct for this in inconsistent ways, which is why any aria-hidden warning that your accessibility checkers raise is worth heeding.

The aria-hidden attribute also interacts with other hiding methods already in the HTML. If content is already removed from rendering via the HTML hidden attribute, CSS display: none, or visibility: hidden, adding aria-hidden="true" on top does nothing – those mechanisms already pull the element out of the accessibility tree.

The aria-hidden attribute is only useful for content that stays visible but shouldn't be announced.

An aria-hidden example

One common use case is a decorative icon that sits inside links, next to visible text that already says the same thing. In raw HTML code, that looks like this:

<a href="/">
  <svg class="icon-home" aria-hidden="true"></svg>
  Home
</a>

Here, the SVG icon is decorative: it reinforces the "Home" label visually but adds no new information.

Marking it aria-hidden="true" removes it from the accessibility tree, so a screen reader announces the link once, as "Home, link," instead of announcing the icon and the text separately.

The link itself keeps its native focusability and accessible name, since aria-hidden was applied only to the icon, not to the <a> element or anything wrapping it.

aria-hidden vs. the HTML hidden attribute

The aria-hidden and HTML hidden attributes may sound alike, but they have different uses.

If you need content to disappear for every user, the HTML hidden attribute, or a CSS property like display: none, is the right solution – it's simpler and doesn't leave a visual mismatch between what sighted and screen reader users experience.

Only use the aria-hidden attribute when content needs to stay visible but shouldn't reach assistive technology users – for example, collapsed dropdown menus that are still present for animation purposes, or offscreen navigation menus waiting to slide into view.

Common mistakes or misconceptions

• Hiding focusable elements or their parents. This issue commonly appears as an aria-hidden warning in accessibility checkers, and for good reason – it leaves keyboard users able to tab to a control that screen reader users can't hear.
• Setting aria-hidden="true" on the document body. This action removes the entire page from the accessibility API, leaving assistive technology users with nothing to navigate. Some page templates or scripts do this unintentionally while managing modal dialogs or overlays.
• Expecting aria-hidden="false" to undo a parent's hidden state. Because aria-hidden is inherited, a false value on a child can't re-expose it once an ancestor is hidden – the fix is to remove aria-hidden="true" from the ancestor instead.
• Stacking aria-hidden on top of other hiding methods. Adding it to an element already hidden with the HTML hidden attribute or CSS display/visibility properties is redundant; the accessibility tree already excludes that content.
• Letting page builders apply it too broadly. On a WordPress website built with a page builder or block library, custom-attribute features can add aria-hidden to an entire section or widget rather than just its decorative icon, hiding real content along the way. Some accessibility checkers specifically flag this pattern, since the guidelines require that interactive content stay exposed regardless of which builder generated it.

aria-hidden FAQS