VisuallyHidden @astryx-svelte/core v0.3.0 · VisuallyHidden
Usage
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.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use to give icon-only buttons and controls an accessible name that screen readers announce. |
| Do | Render as a block element (as="div") with aria-live to announce dynamic updates like drag-and-drop or result counts. |
| Don't | Use it to hide content from everyone; it stays in the accessibility tree; use conditional rendering or hidden to remove content entirely. |
| Don't | Put interactive controls inside it; the content is not visible and cannot receive pointer input. |
Examples
Common configurations, variations, and states.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.