VisuallyHidden

Renders content in the accessibility tree while hiding it visually. Use for accessible names on icon-only controls, aria-live announcement regions, and supplementary screen-reader context. Deliberately has no styling props; the whole point is to stay invisible.

Installation

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

Requires React 19+, base CSS and a Theme provider. See Setup.

VisuallyHidden

Renders content in the accessibility tree while hiding it visually. Use for accessible names on icon-only controls, aria-live announcement regions, and supplementary screen-reader context. Deliberately has no styling props; the whole point is to stay invisible.

Usage guidance

• Use to give icon-only buttons and controls an accessible name that screen readers announce.
• Render as a block element (as="div") with aria-live to announce dynamic updates like drag-and-drop or result counts.
• Avoid: Use it to hide content from everyone; it stays in the accessibility tree; use conditional rendering or hidden to remove content entirely.
• Avoid: Put interactive controls inside it; the content is not visible and cannot receive pointer input.

Examples

• VisuallyHidden:
• VisuallyHidden — Live Region: A polite aria-live region announces visual-only state changes to assistive technology.
• VisuallyHidden — Structural Heading: Give a visually implicit section an accessible name so screen-reader users can navigate to it.
• VisuallyHidden — Supplementary Context: Add screen-reader-only context to terse visual data, like spelling out what a trend arrow means.

Complete example dependencies

Some examples import optional icons. The per-example install command in the examples list identifies exactly what that example needs. For all examples on this page:

npm install @heroicons/react@2.2.0