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.
display: none– Completely removes the element from the layout and accessibility tree. Screen readers cannot access it.visibility: hidden– Hides the element visually but still takes up space in the layout. However, most screen readers will ignore it.Visually hidden (off-screen technique) – Keeps the element in the accessibility tree but makes it invisible on screen using positioning and clipping.
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.
Use the
.visually-hiddenclass to hide text intended only for screen readers.Avoid using
display: noneorvisibility: hiddenfor content that needs to be read by assistive technologies.Test with screen readers (like NVDA or VoiceOver) to confirm accessibility behavior.
Apply visual hiding only when necessary, such as for hidden labels or additional context.