CSS Visually Hidden (Screen Reader Only)
Hide content visually while keeping it accessible to screen readers — the correct alternative to display: none.
The visually-hidden pattern (also called .sr-only) hides content from sighted users while keeping it fully accessible to screen readers and other assistive technologies. Unlike display: none or visibility: hidden — which remove content from the accessibility tree entirely — this pattern keeps the content in the DOM and accessible, just positioned off-screen with dimensions collapsed to 1px.
Usage Note
Use for icon-only buttons (describe the action), skip-to-content links, additional context that sighted users can infer visually, and decorative text that aids screen reader navigation. Never use display: none for content that should be screen-reader accessible.