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 |
| Don't | Put interactive controls inside it; the content is not visible and cannot receive pointer input. |
Props
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Content exposed to assistive technology while hidden from sight. |
as | ElementType (default: 'span') | HTML tag to render as. Use a block element for live regions. |
Examples
Common configurations, variations, and states.A polite aria-live region announces visual-only state changes to assistive technology.
Give a visually implicit section an accessible name so screen-reader users can navigate to it.
Add screen-reader-only context to terse visual data, like spelling out what a trend arrow means.