VisuallyHidden

Hides content from sight while keeping it in the accessibility tree. Use it for context that is obvious visually but not when read aloud.

StableSource

Revenue up 12% compared with last month

<Text>
Revenue up 12%
<VisuallyHidden> compared with last month</VisuallyHidden>
</Text>

Import

tsx

import { VisuallyHidden } from "@merid/react";

Examples

Hidden heading

A region that is obvious from layout still benefits from a heading for screen-reader navigation. as renders the right element.

<nav aria-labelledby="vh-nav">
<VisuallyHidden as="h2" id="vh-nav">Account settings</VisuallyHidden>
<IconButton label="Settings" icon={<SettingsIcon />} />
</nav>

API reference

Renders a <span> by default, forwards its ref and passes other HTML attributes through.

Prop	Type	Default	Description
`as`	`ElementType`	`"span"`	Element or component to render instead.

Styling

Hook	Values
`.mrd-visually-hidden`	The clip pattern; usable on any element without the component

Accessibility

Content stays readable by screen readers and in the tab order if focusable. Do not hide focusable elements — a sighted keyboard user would focus something invisible.
For icon-only buttons, prefer IconButton's label, which sets aria-label directly.

Guidelines

Add short context that the visual layout already implies, like “compared with last month”.

Avoid

Hide keyword-stuffed text or content that sighted users also need.

IconButton — names icon-only actions.
Link — uses the same class for its “opens in a new tab” hint.