Skip to content
Site volume
Colourway

Components

VisuallyHidden

Words for assistive tech that never paint; the focusable variant shows itself on focus.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/visually-hidden
On this page

Example#

Look of this example
Live render of examples/visually-hidden/basic.tsx

Usage#

Use visually hidden text for words a screen reader needs and sighted readers get from context: the end of a link's name, a table's caption, a label beside an icon. It uses the standard clip pattern, so the text stays in the accessibility tree.

  • focusable shows the text when it takes focus, for skip links and similar.
  • Not for hiding content from everyone. Use hidden or conditional rendering for that.

Anatomy#

  1. Visible text: what everyone reads, such as "Pricing".
  2. Hidden text: clipped to one pixel and read by screen readers, such as " for websites".

The hidden part takes no space, so there is nothing to draw.

Volume#

It prints nothing visible, so it is the same at every volume.

Content#

  • Start hidden text with a space when it continues a visible word.
  • Keep it short: it completes a name, it does not explain the page.

Do and don't#

Do

Pricing for websites

Completes a link's name.

Don't

Keywords hidden in a VisuallyHidden span for search engines.

Text for robots.

Hidden text is read aloud to people. Anything in it has to be worth hearing.

Accessibility#

  • Read by screen readers, never painted; focusable lifts the clip while focused (the skip-link pattern).
KeysWhat happens
TabThe focusable variant shows itself while focused

The colour pairs it prints, with their contrast on both papers:

It prints no text of its own (art layer or layout only), so it has no pair to check.

Props#

PropTypeDefaultDescription
focusablebooleannoneShows the content while it (or something inside it) has focus.
renderRenderPropnone

Plus 280 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from VisuallyHiddenProps in packages/overprint-react/src/reading/visually-hidden/visually-hidden.tsx.

Tokens#

System tokens (2)

Scanned from its CSS at build and checked against its registry entry; 2 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactThe reading layer's controls, overlays, forms and visitor prefs (P2-T1 to P2-T5): every Button is the comic hit key, with IconButton, Link and Tooltip; Input, Textarea, Select, Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider with the ruler, RulerReadout and SegmentedControl; Dialog, Drawer, NavSheet, Tabs, Disclosure, Faq and faqJsonLd on Base UI 1.9 where the platform falls short; Field, Fieldset, Form with the site's inline validation, ErrorSummary, Callout, Honeypot, FormTimestamp and QuoteForm; PrefsScript under 1 KB, usePref and setPref with cross-tab sync, ThemeToggle and the visitor VolumeDial; VisuallyHidden.
  • PatchreactSegmentedControl, Tabs and CodeBlock draw LC-05's ring outside the focused key (2 px at 2 px) instead of inset; RadioGroup and CheckboxGroup keys and cards, VolumeDial stops and link Cards mark the element that draws the ring (data-mk-focus-ring); a focusable VisuallyHidden draws the ring. Read the whole entry