aria-hidden — Hiding Content From Assistive Technology

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-hidden removes elements from the Accessibility tree, hiding them from screen readers while keeping them visually visible, useful for decorative content, offscreen panels, and redundant elements.

In this tutorial, you'll learn how to use aria-hidden correctly in your ARIA implementations.

What You'll Learn

By the end of this lesson, you'll know when to hide content with aria-hidden, when to avoid it, how it interacts with focusable elements, and the difference between aria-hidden, display:none, and hidden attribute.

Why It Matters

Hiding content incorrectly can either confuse screen reader users by including irrelevant content or hide important content they need.

Real-World Use

Doda Browser uses aria-hidden on decorative icons and background elements to reduce noise for screen reader users while maintaining visual design.

Hiding Strategies

flowchart TD
  A[Need to hide content] --> B{Reason to hide?}
  B -->|Decorative| C[Use aria-hidden='true']
  B -->|Temporarily offscreen| D[Use aria-hidden + CSS]
  B -->|Not yet loaded| E[Use hidden attribute]
  B -->|For all users| F[Use display:none]
  C --> G{Element is focusable?}
  G -->|Yes| H[Remove from tab order too]
  G -->|No| I[Safe to hide]

How aria-hidden Works

When aria-hidden="true" is set on an element, the element and all its descendants are removed from the accessibility tree. Screen readers will not announce them:

<div aria-hidden="true">
  <!-- This entire section is invisible to screen readers -->
  <p>Decorative background text</p>
  <img src="decorative-border.png" alt="" />
</div>

When to Use aria-hidden

Use aria-hidden for content that exists visually but provides no information when announced:

<!-- Decorative icon: screen readers should ignore it -->
<span aria-hidden="true" class="icon-star"></span>

<!-- Repetitive decorative content -->
<div aria-hidden="true" class="background-pattern"></div>

<!-- Duplicate content that is already announced -->
<button>
  <span aria-hidden="true">+</span>
  Add Item
</button>

When NOT to Use aria-hidden

Never add aria-hidden="true" to content that conveys important information. Focusable elements with aria-hidden cause serious problems:

<!-- Dangerous: focusable element that is hidden from screen readers -->
<button aria-hidden="true" tabindex="0">Submit</button>

A screen reader user can tab to this button but will not hear it announced. They will not know a button exists there.

aria-hidden vs Other Hiding Methods

<!-- Removes from accessibility tree. Element still visible. -->
<div aria-hidden="true">Content</div>

<!-- Removes from both visual and accessibility tree. -->
<div style="display:none">Content</div>

<!-- Removes from both. Same as display:none -->
<div hidden>Content</div>

Common Mistakes

• Hiding focusable elements: A focusable element with aria-hidden="true" becomes a trap for keyboard users.
• Using aria-hidden="false": The default value is already false. Only add aria-hidden to hide content.
• Hiding content that contains important instructions: If the content is important, do not hide it.
• Forgetting to remove aria-hidden when content becomes relevant: Toggle aria-hidden with JavaScript.
• Using aria-hidden as a visual-only hide: Use CSS for visual hiding; use aria-hidden for screen reader hiding.

Practice and Challenge

1. What does aria-hidden="true" do? Removes the element and its descendants from the accessibility tree.

2. What happens if you hide a focusable element? Keyboard users can tab to it but screen readers will not announce it, causing confusion.

3. What is the default state of aria-hidden? false.

4. What is the difference between aria-hidden and display:none? aria-hidden only affects the accessibility tree; display:none affects both visual and accessibility trees.

5. Challenge: Find a webpage that has decorative icons and determine whether they use aria-hidden correctly.

FAQ

Mini Project

Audit a page for aria-hidden usage. Create a list of every element with aria-hidden and determine whether the hiding is appropriate.

What's Next

Continue to aria-live to learn how to make dynamic content announce changes.