VocalHyre
Sign up

HTML · The document layer

What is the difference between hidden and aria-hidden?

Hardhiddenaria-hiddenaccessibility treeUpdated Oct 2026
Quiz this track

Short answer

The hidden attribute removes content from rendering and the accessibility tree, while aria-hidden removes it only from the accessibility tree. aria-hidden content can still be focused, so it is not safe for hiding interactive elements.

These attributes look similar but affect different layers. hidden is a rendering instruction; aria-hidden is an accessibility instruction. Confusing them creates content that is invisible to a screen reader but still reachable by keyboard, or visible but silent.

How each behaves

  • hidden is equivalent to display:none in most cases: no layout, no accessibility tree entry
  • aria-hidden=true hides the element and its subtree from assistive technology but does not change rendering
  • aria-hidden content can still receive focus, creating a focus trap for keyboard users
  • Use hidden when content should be unavailable to everyone
  • Use aria-hidden only for decorative or duplicate content that should stay visible
html
<p hidden>This is not rendered.</p>

<span aria-hidden="true">★★★★★</span>
<span class="sr-only">Rated 5 out of 5</span>
The stars are visual decoration. The screen-reader-only text carries the meaning.

For interactive content that should be completely unavailable, hidden or inert is safer than aria-hidden. The inert attribute removes the subtree from focus and interaction as well as the accessibility tree.

Never put aria-hidden=true on a focusable element. If it must be hidden from assistive technology, it must also be removed from the focus order, usually by not rendering it at all.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

  1. 1Can an aria-hidden element still be focused?
  2. 2When should you use hidden instead of aria-hidden?
  3. 3What does the inert attribute do?
  4. 4Why is aria-hidden dangerous on interactive content?

Say it in the interview

hidden removes content from rendering and from the accessibility tree, while aria-hidden only removes it from the accessibility tree. The key risk is that aria-hidden content can still receive focus, so a keyboard user can land on something a screen reader does not announce. I use hidden or inert when content should genuinely be unavailable, and aria-hidden only for decorative or duplicate visible content.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Related questions

MediumWhat are the basics of ARIA and when should you use it?MediumHow does tabindex affect focus order?HardHow does the dialog element work?

Reading is step one

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.

Start a free HTML interviewBrowse all questions