Hides content from the screen in an accessible way.
Visually hides content while preserving it for assistive technology.
Install the component from your command line.
npm install @radix-ui/react-visually-hidden
Import the component.
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
export default () => <VisuallyHidden.Root />;
Use the visually hidden primitive.
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
import { GearIcon } from '@radix-ui/react-icons';
export default () => (
<button>
<GearIcon />
<VisuallyHidden.Root>Settings</VisuallyHidden.Root>
</button>
);
Anything you put inside this component will be hidden from the screen but will be announced by screen readers.
This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.