Short answer: aria-hidden="true" hides an element and everything inside it from screen readers, while it stays on screen. Use it for decorative icons, repeated text and closed menus. Never put it on a link, a button or a form field, or on anything that contains one.
What aria-hidden does
Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree, the version of the page that screen readers use. It doesn’t hide anything visually.
MDN lists three typical uses: purely decorative content, such as icons or images; duplicated content, such as repeated text; and offscreen or collapsed content, such as menus. When you hide an icon inside a button that has no text, our aria-label guide covers how to give the button its name.
| Method | Hidden from screen readers | Hidden on screen |
|---|---|---|
| aria-hidden="true" | Yes, with all its children | No |
| The hidden attribute | Yes | Yes |
| CSS display: none or visibility: hidden | Yes | Yes |
| role="presentation" or role="none" | Only its meaning, its content is still exposed | No |
From MDN’s aria-hidden page, read November 4, 2026.
The rule for focusable elements
Don’t use aria-hidden="true" on an element that can receive focus. W3C’s Using ARIA calls this the fourth rule of ARIA use: some users would end up focusing on “nothing”. Our what is ARIA guide covers all four rules.
The rule also covers ancestors. An element’s children inherit the attribute, so a hidden container hides every link and button inside it. Setting aria-hidden="false" on a child doesn’t bring it back.
Our keyboard navigation guide covers how to tab through a page and find stops that lead nowhere.
Hiding what people can see
MDN says to hide visible content only when it removes redundant or extraneous content for screen reader users, and only when the same meaning is available another way.
Not every screen reader user is blind. If what someone sees doesn’t match what the screen reader says, the page gets harder to use. And when the hidden attribute, display: none or visibility: hidden already hides an element or one of its ancestors, aria-hidden is unnecessary.
Our alt text guide covers how to describe images that do carry meaning.
How to use aria-hidden, step by step
- List the decorative icons, arrows and separators in your templates.
- Add aria-hidden="true" to each one whose meaning is already in nearby text.
- Hide duplicated content, such as a second copy of the same text.
- Hide menus and panels while they’re closed, and remove aria-hidden when they open.
- Never put it on a link, a button or a field, or on anything that contains one.
- Skip it where the hidden attribute or display: none already hides the element.
- Tab through the page and listen with a screen reader to check nothing went missing.
How we use aria-hidden on our own site
On November 4, 2026, we read 10 of our pages in a browser, at a desktop width and a phone width. Together they carry 660 elements with aria-hidden="true", and none of them is focusable or holds anything focusable. No page hides its whole body.
On our home page, they include the arrows on our service links, the icons of the services menu and the sun and moon icons of the theme switch. The phone menu is hidden too while it’s closed.
Their meaning is in the link text, the menu labels and the switch’s own name, “Switch to dark mode”. The phone menu loses aria-hidden the moment it opens and gets it back when it closes.
Before you publish
- Decorative icons and arrows are hidden from screen readers.
- Their meaning is in the link text or a label.
- No link, button or field sits inside a hidden element.
- Closed menus are hidden and come back when opened.
- Nothing uses aria-hidden="false" to undo a hidden parent.
- Elements hidden with display: none don’t carry aria-hidden as well.
Rememberaria-hidden hides content from screen readers only. Use it for what adds noise, never for anything people can click, type in or tab to.
Accessible markup is part of our web design service, and our accessibility checker guide covers the tools that test it.
Quick answers about aria-hidden
What does aria-hidden="true" do?
It removes the element and everything inside it from the accessibility tree, so screen readers skip it. The element still shows on screen. MDN lists decorative icons, repeated text and collapsed menus as typical uses.
Does aria-hidden hide content visually?
No. It only hides content from assistive technology. To hide something from everyone, use the hidden attribute or CSS such as display: none, which already removes it from the accessibility tree as well.
Can I put aria-hidden on a button or a link?
No. W3C’s Using ARIA says not to use it on a focusable element, because some users would land on “nothing”. The same goes for any element that contains a button, a link or a form field.
What is the difference between aria-hidden and role="presentation"?
aria-hidden="true" removes the whole element from the accessibility API. role="presentation" or role="none" only removes its meaning, while its content is still exposed to assistive technology.
Does aria-hidden="false" show hidden content again?
Not if a parent element has aria-hidden="true". MDN notes that an element’s children inherit the attribute, so a value of false on a child doesn’t bring it back.
Sources
Read on November 4, 2026. MDN Web Docs: ARIA: aria-hidden attribute. W3C: Using ARIA. Our case: our own pages, read in a browser on November 4, 2026.