VisuallyHidden

Hides content from sight while keeping it available to screen readers. Never use display: none for labels you want announced.

Example

Screen readers announce "Open settings for Account"; sighted users see only "Account".

<Button>
  <VisuallyHidden>Open settings for</VisuallyHidden>
  Account
</Button>

Props

Accessibility

• Uses the clip pattern, so the element stays in the accessibility tree and focusable descendants still work.
• Prefer an explicit visible label whenever space allows.