29 / 49

How can you visually hide an element but keep it accessible for screen readers?

Hiding Elements Visually While Keeping Them Accessible in CSS

In CSS, you can hide elements from sighted users while still allowing screen readers to access their content. This technique is essential for accessibility, ensuring important instructions or labels remain available to assistive technologies.

Common Methods and Their Effects

1
display: none – Completely removes the element from the layout and accessibility tree. Screen readers cannot access it.
2
visibility: hidden – Hides the element visually but still takes up space in the layout. However, most screen readers will ignore it.
3
Visually hidden (off-screen technique) – Keeps the element in the accessibility tree but makes it invisible on screen using positioning and clipping.

Example: Visually Hidden but Accessible Text

In this example, the text 'Close menu' is hidden visually but remains readable by screen readers. The clip and position properties ensure the text is moved off-screen while still accessible to assistive technologies.

Best Practices

1
Use the .visually-hidden class to hide text intended only for screen readers.
2
Avoid using display: none or visibility: hidden for content that needs to be read by assistive technologies.
3
Test with screen readers (like NVDA or VoiceOver) to confirm accessibility behavior.
4
Apply visual hiding only when necessary, such as for hidden labels or additional context.

Difficulty: 5/10

Topics: visually hidden, screen reader accessibility, CSS techniques

Scenario Questions

0-2 years experience

1
You need to hide a decorative icon in a navigation bar but still have it read by screen readers. Which CSS rule would you apply and why?
2
If you set display:none on an element, what happens to screen reader accessibility? How would you change that to keep it accessible while invisible?

2-5 years experience

1
We have a modal component where the background overlay should be invisible but still announced for focus management. Explain how you'd hide it visually while preserving screen reader access, and discuss any trade‑offs with other CSS properties.
2
During QA you notice a visually hidden label is not being read by VoiceOver. Walk me through your debugging steps and how you’d adjust the CSS.

5-8 years experience

1
Our design system includes a utility class for visually hidden text used across many components. Describe how you'd implement it to be robust across browsers, support high‑contrast mode, and avoid layout shifts. What edge cases would you consider?
2
When refactoring a large legacy codebase, you find multiple patterns for hiding elements (e.g., opacity:0, visibility:hidden). How would you consolidate them into a single accessible approach and ensure no regressions?

8+ years experience

1
We plan to migrate our UI library to a new theming system and want to guarantee that all visually hidden elements remain accessible. How would you architect the CSS/utility framework, tooling, and testing strategy to enforce this at scale across multiple teams?
2
Discuss the long‑term maintenance implications of using a custom visually-hidden mixin versus native HTML attributes like aria-hidden. When might you choose one over the other in a large product ecosystem?

Follow-up Questions

❓Can you think of any cases where you would deliberately exclude a visually hidden element from the accessibility tree?
❓How does this technique interact with focus management and keyboard navigation?
❓What impact does high‑contrast mode or zoom have on a visually hidden element?