# VisuallyHidden

> Screen-reader-only content.

- **Level**: atom · **Status**: stable · **Role**: content
- **Import**: `import { VisuallyHidden } from "@rrios-forge/ui/atoms/visually-hidden";`
- **Source**: `packages/ui/src/atoms/visually-hidden`

Content invisible on screen, exposed to assistive technology. Uses Tailwind's `sr-only` clip pattern. Use it for off-screen labels, skip links and AT-only context. `focusable` reveals the content while it holds focus — required for skip links (WCAG 2.4.7). Has no variant axes — pure accessibility utility.

## Use it for

- Screen-reader-only text → `VisuallyHidden`

## Stories

- [Playground](/?path=/story/components-atoms-visuallyhidden--playground) · frame: `/iframe.html?id=components-atoms-visuallyhidden--playground&viewMode=story`
- [With IconButton](/?path=/story/components-atoms-visuallyhidden--with-icon-button) · frame: `/iframe.html?id=components-atoms-visuallyhidden--with-icon-button&viewMode=story`
- [Skip link (focusable)](/?path=/story/components-atoms-visuallyhidden--skip-link) · frame: `/iframe.html?id=components-atoms-visuallyhidden--skip-link&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).