Skip to content

Understanding ARIA Hidden Elements and Accessibility Barriers 

If you’ve ever run an accessibility audit and seen an error like: 
“ARIA hidden element must not be focusable or contain focusable elements,” 
you’re seeing one of the most common—and confusing—digital accessibility issues.

What ARIA Does

ARIA, or Accessible Rich Internet Applications, is a set of HTML attributes that help assistive technologies (like screen readers) interpret complex or custom user interfaces. One of these attributes, aria-hidden=”true”, tells assistive technology to ignore an element—to act as if it doesn’t exist in the accessibility tree.

This can sometimes be useful for things like inactive UI components. But it also comes with responsibility: 
If something “doesn’t exist” to assistive technology, users shouldn’t be able to tab into it.

Why This Error Matters

When a developer marks something as aria-hidden=”true” but leaves it focusable — say, a button, link, or input — it creates a trap for people who navigate by keyboard or screen reader.

Here’s what can happen:

  • A user can tab into the hidden element.
  • Their screen reader says nothing, because the element is hidden.
  • They don’t know where they are or how to move forward.
  • Navigation becomes confusing or even impossible.

Essentially, the user has reached a dead end.

Easy Rules to Follow

To avoid creating these barriers, follow these simple guidelines:

Do: 

  • Use HTML hidden or inert attributes, instead of ARIA, for elements that shouldn’t be interacted with.
  • Instead of hiding or disabling elements, leave them active and offer clear labels and error messages to help users avoid errors and understand what needs to be fixed when they make them
  • Ensure that anything that must be visually hidden is also removed from keyboard focus.

Don’t: 

  • Put buttons, links, or inputs inside an element with aria-hidden=”true”.
  • Rely on aria-hidden alone to disable content.
  • Leave off-screen menus or modals tabbable when closed

A Simple Mental Model

  • If it’s aria-hidden, it should be non-interactive.
  • If it’s interactive, it should not be aria-hidden.

Please note that in the guidance from the WC3, the organization that wrote the ARIA specifications. the “First Rule of ARIA” is that you should use HTML—and not use ARIA—whenever possible.

Learn More

For more guidance on using ARIA correctly, check out the University of Washington’s accessibility checklist on ARIA – Accessible Technology. It’s a great resource for understanding when (and when not) to use ARIA attributes and how to keep your web content accessible for everyone.