Layout

VisuallyHidden

Available to screen readers, invisible on screen.

Server-renderable1 export

For labels that are obvious visually but absent semantically — an icon button's purpose, or a heading implied by surrounding layout. Uses clipping rather than `display: none`, which would hide the content from assistive technology too.

Import

import { VisuallyHidden } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/visually-hidden.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Hidden heading

Section heading for screen readers

There is a hidden heading directly above this line. Inspect the DOM, or listen with a screen reader, to find it.

<VisuallyHidden as="div">
  Section heading for screen readers
</VisuallyHidden>

Props

VisuallyHidden props. All native attributes of the underlying element are also accepted and forwarded.
Prop	Type	Default	Description
as	`"span" \| "div" \| "label" \| "legend"`	`"span"`	Element to render.

Accessibility

Content stays in the accessibility tree and in the document's reading order.
Never put interactive controls inside unless they become visible on focus.