VisuallyHidden

Hide content visually while keeping it available to assistive technology. Use it for icon-only buttons, table cells that need a label only screen readers see, and skip links.

The close button below renders only the × icon — but a screen reader hears "Dismiss notification" because the label is wrapped in VisuallyHidden.

Usage

import { VisuallyHidden } from '@bwo-ui/react';

<IconButton onClick={dismiss}>
  <CloseIcon aria-hidden />
  <VisuallyHidden>Dismiss notification</VisuallyHidden>
</IconButton>

<a href="#main" className="skip-link">
  <VisuallyHidden>Skip to main content</VisuallyHidden>
</a>

Props

Prop	Type	Default	Description
`as`	`ElementType`	`'span'`	Tag to render.