Screen-reader-only text (.sr-only)

Sometimes text needs to be HEARD but not SEEN

Icon-only buttons. Status badges. Pagination dots. They make sense visually but a screen reader needs more context.

<button>
  <span class="sr-only">Close menu</span>
  <span aria-hidden="true">×</span>
</button>

The screen reader announces "Close menu, button." The visible UI shows just "×."

The canonical .sr-only CSS

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

This is the only sr-only that works correctly across:

• All screen readers (NVDA, JAWS, VoiceOver, TalkBack).
• All zoom levels (no display: none which would skip).
• Text browsers (Lynx).

Don't use display: none — screen readers skip those. Don't use visibility: hidden — same. The clip/width-1px trick is the standard.

.sr-only-focusable

Used for skip links (previous lesson). The trick: hide normally, but make visible when keyboard-focused.

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  /* ... reset back to normal */
}

Tailwind ships .sr-only and .not-sr-only utilities pre-built.