Layout
Visually Hidden
An element that hides content visually while keeping it in the accessibility tree. The focusable variant appears on focus, which suits a skip link.
ReactVueWeb Components
View in Storybook Playground
Examples
// Screen-reader label
<VisuallyHidden>Loading…</VisuallyHidden>
// Skip link (visible on focus)
<VisuallyHidden as="a" focusable href="#main">Skip to content</VisuallyHidden>Props
| Name | Type | Default | Description |
|---|---|---|---|
focusable | boolean | false | When true, the element becomes visible on focus — useful when it wraps a focusable element (e.g. a skip-navigation link). |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.