How do you visually hide content but keep it accessible to screen readers?

CSS

The short answer

Use a CSS technique called "visually hidden" (or "sr-only") that moves content off-screen or makes it invisible while keeping it in the DOM for screen readers. Do not use display: none or visibility: hidden — those hide content from screen readers too.

The visually-hidden class

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

This makes the element invisible to sighted users but still readable by screen readers.

Usage examples

Skip navigation link:

<a href="#main-content" class="visually-hidden">
  Skip to main content
</a>

Sighted users do not see it, but keyboard and screen reader users can use it to skip the navigation.

Form labels:

<label for="search" class="visually-hidden">Search</label>
<input id="search" type="text" placeholder="Search..." />

The search input has a visible placeholder, but screen readers need a proper label.

Icon-only buttons:

<button>
  <svg><!-- close icon --></svg>
  <span class="visually-hidden">Close dialog</span>
</button>

Sighted users see the icon. Screen readers announce "Close dialog."

What NOT to use

/* Bad — hides from screen readers too */
.hidden {
  display: none;
}
/* Bad — hides from screen readers too */
.hidden {
  visibility: hidden;
}
/* Bad — content is still there but takes up space */
.hidden {
  opacity: 0;
}

display: none and visibility: hidden remove the element from the accessibility tree. opacity: 0 hides it visually but the element still takes up space in the layout.

Interview Tip

Show the visually-hidden CSS snippet and give a practical example like a skip link or icon-only button. The key point is that display: none hides from everyone including screen readers, while the visually-hidden technique only hides from sighted users.

Why interviewers ask this

This tests accessibility knowledge. Interviewers want to see if you know how to make content available to assistive technologies without affecting the visual design. It is a fundamental accessibility technique that every frontend developer should know.

Table of Contents