Impact of CSS Display on Accessibility and ARIA Roles
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.
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.visibility: hidden– Hides the element visually, and most screen readers ignore it, though it still occupies layout space.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.Use visually hidden techniques (off-screen positioning with
clipandposition) if you want an element hidden visually but still accessible to assistive technologies.
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.
Avoid
display: nonefor content that should remain accessible to screen readers.Use visually hidden techniques for labels, instructions, or ARIA descriptions that should be read but not displayed.
Test accessibility using tools like NVDA, VoiceOver, or Lighthouse to confirm ARIA roles are effective.
Combine proper semantic HTML and ARIA roles with careful use of display and visibility properties to ensure full accessibility.