VisuallyHidden

Renders a <span> (or any element) that is clipped from view using a CSS technique that keeps it in the accessibility tree. Use it to add descriptive text for screen reader users without altering the visual layout.

Icon button with accessible label

<button type="button">
  ✕
  <VisuallyHidden>Close dialog</VisuallyHidden>
</button>

Skip navigation link

Skip to main contentSkip to main(Focus this area to reveal a skip link)
<a href="#main" class="skip-link">
  <VisuallyHidden>Skip to main content</VisuallyHidden>
</a>

Form field label supplement

<label>
  Search
  <VisuallyHidden> (press Enter to submit)</VisuallyHidden>
  <input type="search" />
</label>

Custom element

Visible text

This paragraph is visually hidden but accessible

More visible text
<VisuallyHidden component="p">
  This paragraph is hidden visually but accessible to screen readers
</VisuallyHidden>

Props

PropTypeDefaultDescription
componentstring'span'HTML element to render as root
classstring—Additional CSS class names
styleobject—Inline styles
childrenReactNode—Content to hide visually but keep accessible