Visually Hidden
Hides content visually while keeping it accessible to screen readers.
Preview
- Article one
- Article two
This preview uses documentation-only styling. Ship with one of the included recipe outputs (CSS, Tailwind, or UnoCSS) for production styles.
Visually Hidden hides content visually while keeping it accessible to screen readers. It uses the standard clip/overflow technique to remove content from the visual layout without removing it from the accessibility tree.
Usage
Visually Hidden has a single Root part. Wrap any content that should be hidden visually but remain available to assistive technologies.
import * as VisuallyHidden from "@solidiom/visually-hidden"
;<VisuallyHidden.Root>
<label>Search</label>
</VisuallyHidden.Root>Installation
Install the package with pnpm add @solidiom/visually-hidden. The package requires compatible solid-js and @solidjs/web peer dependencies.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | JSX.Element | — | Content to hide visually. |
class | string | — | Additional CSS class for styling overrides. |
Styling
Visually Hidden carries data-scope="visually-hidden" and data-part="root" attributes. It renders as a <span> element with inline styles for the clipping technique. The styles use position: absolute, clip: rect(0, 0, 0, 0), white-space: nowrap, width: 1px, height: 1px, and overflow: hidden to ensure the content is completely invisible while remaining in the document flow for assistive technologies.
Keyboard & behavior
This primitive has no keyboard interaction. It renders static content that does not receive focus or respond to key events.
SSR and hydration
Visually Hidden is a passive display element with no interactive state. It renders as static HTML and requires no client-side hydration.