VisuallyHidden
Hides content visually while keeping it available to screen readers
Category: display · WCAG 2.2-AA · accessibility, screen-reader, sr-only, hidden
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content announced by assistive technology but not painted |
When to use
- Giving an icon-only control an accessible name without showing text
- Adding screen-reader-only context that would be redundant visually
- Providing off-screen labels for tables, links, or form controls
When not to use
- Hiding content from everyone — use hidden or display:none
- Temporarily hiding then revealing UI — use conditional rendering
How to build an accessible VisuallyHidden in React →
Examples
Icon button label
Gives an icon-only control an accessible name
<button type="button"><CloseIcon /><VisuallyHidden>Close dialog</VisuallyHidden></button>Table context
<th>Price <VisuallyHidden>(in euros)</VisuallyHidden></th>Related components
- SkipNav — SkipNav uses a similar hidden-until-focused technique for skip links