Visually hidden: all about the web’s oldest workaround
Why visually-hidden keeps content accessible to screen readers, and the browser quirks behind this CSS pattern.
Web developers have been copying the same .visually-hidden (or .sr-only) snippet for years to hide content visually while keeping it accessible to screen readers. Dave Bushell dug into why this “magic” class looks the way it does and why it needs so many strange properties.
The main idea: display:none and visibility:hidden remove an element from the accessibility tree entirely. Screen readers simply never learn that this content exists. Sometimes you need the opposite: hide text from sight while keeping it available to assistive technologies.
Typical use cases:
- labels for icon buttons
- Skip to content links
- extra context for links such as “Read more”
That led to a pattern like this:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}Every line is there for a reason. For example, position:absolute takes the element out of the flow; 1px instead of 0, because zero dimensions can break focus in some browsers; overflow:hidden + clip-path visually “crop” the content.
So .visually-hidden is a tiny utility that is actually a compromise shaped by decades of browser bugs, screen reader quirks, and accessibility requirements.
🤔 Will there be a native solution?
The idea of a dedicated native mechanism for “visually hidden but accessible” has been discussed for a long time. But browsers are in no hurry to introduce a special property or attribute. First, the existing pattern already works reliably. Second, the behavior of these elements depends heavily on screen readers and other assistive technologies, which makes it difficult to standardize.
For now, .visually-hidden remains the de facto standard, even after almost 20 years.