Screen Readers

Class reference

Examples

Hidden text labels for icon-only buttons

<button>
  <svg aria-hidden="true"><!-- close icon --></svg>
  <span class="sr-only">Close dialog</span>
</button>

The button has no visible label, but screen readers announce "Close dialog" when focused.

Visually-hidden form labels

<label class="sr-only" for="email">Email address</label>
<input id="email" type="email" placeholder="you@example.com" />

The placeholder provides the visual cue; the label is read aloud.

Skip links

<a href="#main" class="sr-only">Skip to main content</a>
<header>...</header>
<main id="main">...</main>

The skip link is invisible by default. Pair with a :focus style to reveal it when keyboard users tab to it.

What sr-only does

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

This is the canonical visually-hidden pattern. Accessible to assistive tech while removing the content from visual layout. It's not the same as display: none (which hides from assistive tech too) or visibility: hidden (which preserves layout space).

When to use which

• sr-only. Content that's meaningful to screen readers but visually redundant.
• hidden. Content that should be hidden from everyone (visually and assistively).
• aria-hidden="true" (HTML attribute, not a class). Visible content that should be ignored by screen readers (decorative SVGs, for example).

Never use sr-only to hide content from sighted users for design reasons. They can still focus through it and copy-paste it.