sr-only for visually hidden but screen-reader accessible content

An icon button or decorative element needs a text label for screen readers, but displaying the text visually would break the design. Using display:none or visibility:hidden removes the content from the accessibility tree entirely.

Use the sr-only utility to visually hide content while keeping it accessible:

<!-- Icon button with accessible label -->
<button class="p-2 rounded hover:bg-gray-100">
  <svg aria-hidden="true" class="w-5 h-5">
    <!-- icon paths -->
  </svg>
  <span class="sr-only">Close menu</span>
</button>

<!-- Skip navigation link -->
<a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:p-4 focus:bg-white focus:text-black">
  Skip to main content
</a>

<!-- Form label that's visually implicit -->
<label class="sr-only" for="search">Search</label>
<input id="search" type="search" placeholder="Search..." />

sr-only uses a combination of CSS properties (position:absolute, width:1px, height:1px, overflow:hidden, clip, etc.) that hide the element from sighted users while keeping it in the document flow for assistive technologies.

When providing accessible labels for icon buttons, decorative images, or off-screen navigation.