How to Hide Elements Visually but Keep Them Accessible to Screen Readers

Goal

Sometimes you need to hide an element visually but keep it accessible to screen readers (e.g., descriptions, hints, service text for blind users).

Approach 1: CSS Class ".sr-only"

This is the most common way to hide an element from eyes but not from screen readers.

.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;
}

<p class="sr-only">Only screen reader sees this</p>

Used in Tailwind, Bootstrap (.sr-only) and other UI frameworks.

Approach 2: Attribute "aria-hidden="true""

Opposite behavior — hides from screen readers but keeps on screen.

<p aria-hidden="true">This text is visible but not read by screen readers</p>

Use aria-hidden="true" only for decorative or duplicate elements.

Approach 3: "span" with text + "aria-label"

When you want to visually show one element but pass different text to screen reader.

<button aria-label="Close modal">
  ❌
</button>

Approach 4: Text Off-screen (less preferable)

.hidden-offscreen {
  position: absolute;
  left: -9999px;
}

This method works but is less reliable and can cause navigation problems.

What Not to Do

• display: none and visibility: hidden — completely hide from both eyes and screen readers.
• Removing element from DOM.