aria-hidden
aria-hidden keeps visible but redundant or decorative content out of the accessibility tree so screen readers skip it.
See it
What it is
aria-hidden='true' removes an element and all of its descendants from the accessibility tree while leaving it visible on screen. It is for content that adds no meaning when announced, such as a decorative icon beside a button label or a duplicate visual rendering of the same text.
Use it when the same useful name remains available elsewhere. A trash icon inside a button labelled 'Delete' can be aria-hidden because the text already names the action. If the icon is the only thing conveying the action, hiding it without supplying an accessible name makes the button nameless.
Never put aria-hidden='true' on a focusable element or any ancestor of one. Keyboard focus can still land there even though assistive technology cannot describe it; axe DevTools reports this as the aria-hidden-focus rule, and it is one of the few ARIA mistakes automated tools catch reliably. aria-hidden also does not hide pixels or remove layout space; use hidden, display: none, or visibility: hidden when the content should disappear for everyone.
Ask AI for it
Audit this component for decorative and duplicated content. Add aria-hidden='true' to decorative SVG icons whose adjacent visible text already names the control, and remove any tabindex or title element from those SVGs. Do not hide meaningful text, form feedback, or the only label for a control. Before hiding any subtree, inspect it for links, buttons, form controls, contenteditable items, and tabindex values, then confirm with a keyboard Tab pass that it contains no focusable descendants. Use the HTML hidden attribute instead when content must be removed visually and from the accessibility tree together. Report every element changed and the accessible name that remains after the change.