The CSS display property affects whether elements are included in the accessibility tree and how assistive technologies interpret them. Certain display values can make content invisible to screen readers or alter how ARIA roles are perceived.

Key Points

1
display: none – Removes the element from both visual layout and the accessibility tree. Screen readers will not announce it, and ARIA roles applied to it have no effect.
2
visibility: hidden – Hides the element visually, and most screen readers ignore it, though it still occupies layout space.
3
Other display values (block, inline, flex, grid, etc.) keep the element in both the visual layout and accessibility tree, allowing ARIA roles to function correctly.
4
Use visually hidden techniques (off-screen positioning with clip and position) if you want an element hidden visually but still accessible to assistive technologies.

Example: Visually Hidden Accessible Content

Here, the 'Close menu' text is hidden visually but still accessible to screen readers. Using display: none instead would remove it from the accessibility tree and prevent assistive technologies from reading it.

Best Practices

1
Avoid display: none for content that should remain accessible to screen readers.
2
Use visually hidden techniques for labels, instructions, or ARIA descriptions that should be read but not displayed.
3
Test accessibility using tools like NVDA, VoiceOver, or Lighthouse to confirm ARIA roles are effective.
4
Combine proper semantic HTML and ARIA roles with careful use of display and visibility properties to ensure full accessibility.

Scenario Questions

0-2 years experience

1If you set an element's CSS to `display:none`, what happens to its presence in the accessibility tree, and how does that affect screen reader users?
2You have a button that visually looks like a link using `display:inline-block`. Does changing its display affect its ARIA role, and what should you verify?
3When you change a container from `display:flex` to `display:block`, how might that impact the way assistive technologies interpret its child elements?

2-5 years experience

1We noticed that a modal dialog stopped being announced by screen readers after we switched its wrapper from `display:none` to `visibility:hidden` before showing it. Why did that happen, and how would you fix it?
2During a feature rollout, a list of items rendered with `display:grid` is missing from the accessibility tree in Chrome but appears in Firefox. What could be causing the discrepancy, and how would you debug it?
3You need to hide decorative icons visually but keep them accessible. Which CSS display values would you use, and why?

5-8 years experience

1Design a reusable component library where certain components can be toggled hidden via CSS. How would you ensure that using `display:none` versus other techniques doesn't unintentionally break ARIA relationships across the app?
2Our large‑scale dashboard uses `display:contents` to flatten DOM for layout, but some assistive tech reports missing landmarks. Explain the trade‑offs and propose a strategy to maintain accessibility while keeping the layout benefits.
3When implementing virtual scrolling, rows are added/removed with `display:none` to keep DOM size low. Discuss the impact on the accessibility tree and how you'd mitigate performance and usability concerns.

8+ years experience

1We are migrating a legacy codebase that heavily uses `display:none` to conditionally hide sections. How would you architect a migration plan that preserves ARIA semantics and minimizes regression risk across multiple teams?
2At the organization level, we need a policy for CSS techniques that affect the accessibility tree. What guidelines would you set for using `display:none`, `visibility:hidden`, `opacity:0`, and off‑screen positioning, and how would you enforce them in CI?
3Consider a cross‑platform web app that must support both native screen readers and emerging voice‑controlled browsers. How would you design a CSS strategy that balances visual layout (including flex, grid, and `display:contents`) with consistent accessibility tree behavior across these environments?

Follow-up Questions

Can you give an example where `display:contents` caused an ARIA role to be lost?
What alternative CSS approaches would you use to hide content while preserving its role?
How do you verify that your hiding technique works across different screen readers?

Sharethis question

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.