.visually-hidden

Hidden from eyes, kept for readers

CaveatThe obvious hiding tools take the element out of the accessibility tree with them: display: none and visibility: hidden silence a screen reader as thoroughly as they blank the screen, and a width: 0 box gets skipped by some readers too. What survives is a box hidden by geometry rather than removal — one pixel square, clipped, overflow cut. The declaration nobody reads is doing real work: without white-space: nowrap the 1px box wraps every word onto its own line, and some readers then announce the label one word at a time. And keep focusable elements out of it unless the disappearing act is deliberate — a link in there is a Tab stop on something the eye cannot find.

Fallbackclip-path: inset(50%) replaced the deprecated clip: rect(0 0 0 0), and every current engine knows it; declare both if the logs still show a museum. The other direction needs no CSS at all: aria-label on the control does the same job in one attribute. The class earns its place when the text should behave like text — findable by the browser’s in-page search, translated by machine translation, which still skips aria-* attributes in most engines.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  /* or readers spell the label
     out one word per line */
  white-space: nowrap;
}

Published 3 Sep 2026