Visually hidden accessible text

Sometimes you need text just for screen readers — e.g. explaining an icon-only button. display:none removes it from there too, but this class hides it only visually.

Code

<button style="width:2rem;height:2rem;border-radius:6px">
  &#128465;
  <span class="visually-hidden">Delete item</span>
</button>
<style>
  .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  }
</style>

Preview

Explanation

Unlike display:none or visibility:hidden, this technique keeps the element "visible" to the browser's accessibility APIs while hiding it visually via a 1×1px size and clipping.

This class is often called sr-only (screen-reader only) — same technique, different name.

Related tools

Accordion (details/summary)

A native accordion built on details/summary, accessible out of the box, no JS.