VisuallyHidden

The 

VisuallyHidden
component is used to visually hide elements while keeping them active in the accessibility tree.

Props

Name
Type
Default
Description
children
node

Do's & Don'ts

Use this to add visually hidden information such as extra descriptions, titles or arbitrary text that helps people using screen readers navigate the page.

Don't use this if you want to fully hide an element both visually and for screen readers.

Examples

Open in Playroom