Overview
Visually Hidden hides content visually while keeping it accessible to screen readers. This is useful for providing additional context or labels that don’t need to be visible but should be announced by assistive technologies.
Features
- Hides content visually using CSS
- Content remains accessible to screen readers
- Content remains in the document flow
Installation
npm install @radix-ui/react-visually-hidden
Anatomy
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
export default () => (
<VisuallyHidden.Root>
Hidden content
</VisuallyHidden.Root>
)
API Reference
Root
Hides content visually while keeping it accessible to screen readers.
The content to be visually hidden.
Examples
Form Label
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
export default () => (
<div>
<VisuallyHidden.Root>
<label htmlFor="search">Search</label>
</VisuallyHidden.Root>
<input
id="search"
type="text"
placeholder="Search..."
/>
</div>
);
Skip to Content Link
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
export default () => (
<div>
<a
href="#main-content"
style={{
position: 'absolute',
left: '-10000px',
width: '1px',
height: '1px',
overflow: 'hidden',
}}
onFocus={(e) => {
e.target.style.position = 'static';
e.target.style.width = 'auto';
e.target.style.height = 'auto';
}}
onBlur={(e) => {
e.target.style.position = 'absolute';
e.target.style.left = '-10000px';
e.target.style.width = '1px';
e.target.style.height = '1px';
}}
>
Skip to content
</a>
<main id="main-content">
{/* Main content */}
</main>
</div>
);
Icon Button Label
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
export default () => (
<button>
<svg width="15" height="15" viewBox="0 0 15 15">
{/* SVG icon content */}
</svg>
<VisuallyHidden.Root>Close</VisuallyHidden.Root>
</button>
);
Using VISUALLY_HIDDEN_STYLES
The component also exports the CSS styles used to visually hide content, which you can use directly:
import { VISUALLY_HIDDEN_STYLES } from '@radix-ui/react-visually-hidden';
export default () => (
<span style={VISUALLY_HIDDEN_STYLES}>
This content is visually hidden
</span>
);
How It Works
The component uses a combination of CSS properties to hide content visually:
position: absolute - Removes from normal document flowwidth: 1px and height: 1px - Makes element nearly invisiblepadding: 0 and margin: -1px - Minimizes spaceoverflow: hidden - Hides any overflowclip: rect(0, 0, 0, 0) - Clips the elementwhiteSpace: nowrap - Prevents wrapping
When to Use
Use Visually Hidden when you need to:
- Provide additional context for screen readers
- Add labels to form inputs that don’t need to be visible
- Include descriptive text for icon-only buttons
- Create skip links for keyboard navigation
- Provide status messages that are announced but not shown
Accessibility
This technique is widely used and recommended for hiding content visually while keeping it accessible. It’s based on the approach used by Bootstrap and other accessibility-focused libraries.