aria-hidden

aria-hidden="true" is a WAI-ARIA attribute that removes an element and all of its children from the accessibility tree, hiding it from screen readers without changing the visible rendering. The accessibility tree is the data structure assistive technologies read page content from. The attribute acts only there: the element stays visible on screen and keeps its layout. That makes aria-hidden the counterpart of the visually hidden text pattern (sr-only), which works the other way round and offers content to screen readers only. It is meant for redundant and decorative content, say an icon next to a button that already has a text label. The most common misuse is aria-hidden="true" on a focusable element or one of its ancestors. The keyboard still reaches the link or button, yet the screen reader announces nothing; the W3C note “Using ARIA” explicitly rules this combination out. Combined with display:none or the HTML hidden attribute, aria-hidden is unnecessary, because elements hidden that way are already absent from the accessibility tree. One limit remains: aria-hidden="false" on a child does not undo hiding inherited from a parent.

In practice

Before adding aria-hidden="true", check two things: is the content genuinely redundant, and does the subtree contain a link, a button or a form field? Good candidates are decorative SVG icons next to button text or an emoji inside a heading. The classic mistake is the closed overlay menu that gets aria-hidden="true" while its links remain reachable with the Tab key. Anyone working with a screen reader then lands on elements without a name and without feedback. The remedy: also hide closed menus with display:none or the hidden attribute, which makes them unfocusable as well. The counter-test takes a minute. Tab through the page with a screen reader running; every element that receives focus but is not announced is a finding. Hide visible text only where assistive technology would genuinely read it twice. When in doubt, leave it exposed.

Matching service

Sources

← Back to the glossary