Visually hidden
A utility that hides content from the screen while retaining readability by screen readers.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { VisuallyHidden } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | The text to hide from the screen while leaving it available to a screen reader. |
Accessibility
What the component does for you, and what it needs from you.
- The text stays in the accessibility tree and in the reading order, which is the whole point. This is not display none.
- It remains focusable if it holds something focusable, so do not hide controls in it.
- Use it to add to what is on screen, never to carry something only some readers get.