VisuallyHidden

VisuallyHidden hides its children visually, while keeping content visible to screen readers.

Gotchas

VisuallyHidden is positioned absolutely, so it needs a positioned ancestor. Otherwise, it will be positioned relative to the nearest positioned ancestor, which may be the body, causing undesired scroll bars to appear.

<label style={{position: 'relative'}}>
  <VisuallyHidden>
    <input type="checkbox" />
  </VisuallyHidden>
  <span>Subscribe to our newsletter</span>
</label>

Hook

In order to allow additional rendering flexibility, the useVisuallyHidden hook can be used in custom components instead of the VisuallyHidden component. It supports the same options as the component, and returns props to spread onto the element that should be hidden.

Example

import {useVisuallyHidden} from '@react-aria/visually-hidden';

let {visuallyHiddenProps} = useVisuallyHidden();

<div {...visuallyHiddenProps}>I am hidden</div>

API