Hiding Content Accessibly: The Right Way to Toggle Visibility

Introduction

Hiding content is a necessary design tool, but if done incorrectly, it can create barriers for screen reader users, keyboard users, and those using assistive technology. Chapter 8 of Web Accessibility Cookbook dives into toggling content visibility—a critical topic for ensuring inclusive UI patterns.

Limited space and client demands push designers to fit as much information as possible onto a page, leading to the use of:

• Tabs
• Accordions
• Flyout navigations
• Disclosure widgets

While showing content upfront is usually best, sometimes hiding it is necessary. If so, it needs to be done correctly to ensure accessibility.

The Difference Between "Visually Hidden" and "Visually & Semantically Hidden"

Visually Hidden:

• Content is not visible but remains in the accessibility tree.
• Screen reader users can still access it.
• Useful for skip links, live regions, and hidden instructions.

Visually & Semantically Hidden:

• Content is both invisible and removed from the accessibility tree.
• Screen readers cannot access it.
• Used for irrelevant or unavailable content.

Read more: The Anatomy of Visually Hidden Content

Incorrect Hiding Techniques

Common Mistakes:

• Using aria-hidden="true" on interactive elements such as buttons and links. This removes them from the accessibility tree, making them completely unusable for screen reader users.
• Using opacity: 0;, height: 0;, or transform: scale(0); without also removing them semantically. These methods make content invisible but do not prevent screen readers from accessing them, causing confusion.
• Hiding content that is referenced elsewhere. If another element relies on a hidden section for context, users may lose critical information.

Example of incorrect hiding practice:

CSS

.hidden {  
  opacity: 0;  
  height: 0;  
  overflow: hidden;
}

‍While this makes content invisible, it remains focusable and readable by screen readers, creating unexpected behavior.

Best Practices for Hiding Content

• Use the right method for the right situation.
• Pair visual hiding with semantic hiding if necessary.
• Ensure focusable elements remain accessible or remove them from the tab order.
• Use aria-hidden cautiously—never on interactive elements.

How to hide content for visual users while keeping it programmatically detectable for screen reader users:

CSS

.sr-only {  
  position: absolute;  
  width: 1px;  
  height: 1px;  
  padding: 0;  
  margin: -1px;  
  overflow: hidden;  
  clip: rect(0, 0, 0, 0);  
  white-space: nowrap;  
  border: 0;
}

How to hide content from EVERYONE:

CSS

.really-hidden {  
  display: none;  
}

A Comparison of Hiding Methods

Kitty Giraudel provides an excellent overview of different hiding methods and their impact on accessibility. Below is an adapted table from their blog post "Hiding Content Responsibly".

Conclusion

Hiding content isn’t just a design decision—it’s an accessibility challenge. Before hiding anything, ask:

1. Can this content be included in a better way?
2. Is it necessary to hide this content visually, semantically, or both?
3. Will users still be able to interact with what they need?

When in doubt, test with real users, use tools like screen readers, and always prioritize accessibility over aesthetics.