ARIA state
aria-hidden
Removes an element from the accessibility tree while leaving it on screen.
It hides the element and everything inside it from assistive technology, while leaving it visible and clickable for everybody else. That gap is the point of the attribute and it is also the risk. Nothing about the page changes except what a screen reader can reach.
Which roles may carry aria-hidden
- Value
- true/false/undefined
- Filed as
- A state, which is how ARIA files it and not a rule about how often it changes.
- Roles that may carry it
- Any role. This one is global, which is why no individual role lists it.
Global means no role has to grant permission for it. There is one more place to check, because ARIA in HTML sets rules per element as well as per role, and it allows no aria-* attributes at all on a datalist or on the html element. Past that, the way a global attribute goes wrong is rarely where it sits. It is whether it is still true, which is the next section.
Every role above comes from the specification's own list for this attribute, checked name for name. The normative definition stays with the W3C, in the aria-hidden section of the ARIA specification.
Keeping aria-hidden true
The rule people quote is that it must never go on anything focusable. The testable version is narrower and more useful. What fails is an element with aria-hidden set to true that contains something in the sequential focus order, because a keyboard user can then land on something a screen reader cannot describe. Something focusable only by script, and out of the tab order, does not break that rule. The maintenance job is the offscreen menu hidden on close that stays hidden after it reopens, and the modal that hides the page behind it and never puts it back. One practical note. Setting the attribute to false is known to work inconsistently across browsers, so removing it is the more reliable way to unhide something.
How aria-hidden gets checked
There are test rules that check an ARIA attribute is one that exists, is allowed on the role underneath it, and carries a value of the right type. What they map to is ARIA's own author requirements rather than any WCAG criterion, so a misplaced attribute breaks ARIA without being a WCAG failure by itself. It becomes one under 4.1.2 Name, Role, Value the moment the missing or wrong value means the control's state cannot be worked out programmatically, which is what usually happens next.
Nothing automated catches the failure this page is about. A stale value is a valid value, on a permitted role, with the right type. It is only wrong about the world.
Attributes you will meet alongside aria-hidden
- aria-atomic Whether an update should be read whole, or only the part that changed.
- aria-busy Says a region is still being updated, so wait before announcing it.
- aria-controls Points at what this control operates. A combobox has to say what it opens.
- aria-current Marks the one item in a set that represents the here and now, such as the current page in a nav.
- aria-describedby Points at further description, read after the name. Hints and error text usually go here.
- aria-details Points at richer explanation elsewhere in the page, which people can navigate to rather than have read out.
- aria-flowto Overrides reading order by pointing at what should be read next. Rarely the right answer.
- aria-keyshortcuts Lists the keyboard shortcuts that activate this control, so they can be announced and checked for clashes.
Every ARIA state and property · Every ARIA role · ARIA explained