Hidden By clip: rect

The classic accessible-hide recipe pinned an element to one pixel and clipped it away, keeping it in the page for screen readers but off the screen.

In 2026: Partly. The clip property still works, so the phrase below is present for assistive technology and invisible to the eye. clip is deprecated in favour of clip-path: inset(50%), but browsers keep obeying it. clip only affects absolutely positioned elements, which is why the recipe also sets position: absolute.

Where it came from: The clip visually-hidden pattern, spread through Chris Coyier's CSS-Tricks around 2011. The clip property is CSS2, W3C 1998, now deprecated. MDN ↗

<style>
/* The classic accessible hide: present for readers, off the screen for eyes */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);  /* deprecated, still obeyed */
  white-space: nowrap;
}
</style>

<p>Search <span class="visually-hidden">the entire music archive</span>here.</p>
<p>A screen reader announces "Search the entire music archive here".
   Your eyes see "Search here". clip does the hiding, and
   clip-path: inset(50%) is its replacement.</p>