# Screen Reader Only Content

**MUST** · **ID:** `interactions-sr-only` · **Category:** interactions
**Source:** [Tailwind](https://tailwindcss.com/docs)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-sr-only

> MUST: Use sr-only for accessible but visually hidden content (icon labels, status context)

Use sr-only for visually hidden but accessible content

Screen reader users need context that sighted users get visually. Icon-only buttons need labels, status indicators need descriptions. The sr-only class hides content visually while keeping it accessible.

## Bad — do not do this

`interactions-sr-only-bad`

```tsx
const actions = [
  { label: 'Like', d: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z' },
  { label: 'Share', d: 'M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z' },
  { label: 'Delete', d: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16' },
];

export function SrOnlyBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Icon buttons</h4>
        <div className="flex gap-3">
          {actions.map((a) => (
            <button key={a.label} className="p-2 bg-muted rounded-lg hover:bg-muted/80">
              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={a.d} />
              </svg>
              {/* The label exists, but display:none removes it from the accessibility
                  tree entirely, so it announces nothing. */}
              <span className="hidden">{a.label}</span>
            </button>
          ))}
        </div>
        <div className="mt-4 bg-muted rounded p-3 font-mono text-xs">
          <code className="text-destructive">{`<span class="hidden">Delete</span>`}</code>
        </div>
      </div>
      <p className="text-xs text-destructive">
        The label is hidden with <code>display: none</code>, which strips it from the accessibility tree. A screen
        reader announces only "button"
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-sr-only-good`

```tsx
export function SrOnlyGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Accessible Icon Buttons</h4>
        <div className="flex gap-3">
          <button className="p-2 bg-muted rounded-lg hover:bg-muted/80">
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
            </svg>
            <span className="sr-only">Add to favorites</span>
          </button>
          <button className="p-2 bg-muted rounded-lg hover:bg-muted/80">
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
            </svg>
            <span className="sr-only">Share</span>
          </button>
          <button className="p-2 bg-muted rounded-lg hover:bg-muted/80">
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
            <span className="sr-only">Delete</span>
          </button>
        </div>
        <div className="mt-4 bg-muted rounded p-3 font-mono text-xs">
          <code>{`<span class="sr-only">Add to favorites</span>`}</code>
        </div>
      </div>
      <p className="text-xs text-success">
        Icons have sr-only labels for screen reader users
      </p>
    </div>
  );
}
```

## References

- [Screen Readers Utility](https://tailwindcss.com/docs/display#screen-reader-only)
- [Visually Hidden](https://www.a11yproject.com/posts/how-to-hide-content/)