SROnly

SROnly wraps children in a clipped span so the text stays in the accessibility tree without painting on screen. Use it when sighted UI already carries the meaning (heading, chips, compact fraction) and assistive tech still needs an extra phrase, name, or description.

Default root is a span. Pass render when the accessible text must live on another element while keeping the clip styles. Do not put focusable controls inside it, and do not mark the wrapper aria-hidden — that would remove the text from the tree.

Prefer a visible muted Text line when sighted users also need the guidance. Prefer aria-label on the control itself when a short name is enough and no shared label node is required.

When to useCopy Anchor Link

• Extra status or count that should not add visual chrome beside a heading
• Accessible name for an IconButton via aria-labelledby
• Compact visible phrasing that needs fuller wording for screen readers (pagination, result counts)

When not to useCopy Anchor Link

• Sighted users also need the copy → Text tone="muted" (or Field helper)
• A short name belongs on the control → aria-label on IconButton / Button
• You need to hide something from everyone → remove it from the tree, do not clip it
• Focusable controls or interactive widgets as children

RelatedCopy Anchor Link

• IconButton — icon-only actions that need an accessible name
• Text — visible helper copy instead of AT-only text
• Stack — host for heading + SROnly clusters
• Chip — visible filter state next to an AT-only summary

Common examplesCopy Anchor Link

Inbox statusCopy Anchor Link

Keep the panel heading clean. Park the unread count in SROnly while a badge on the notifications control covers the visual cue.

Named toolbar actionCopy Anchor Link

Point aria-labelledby at an SROnly id when a toolbar glyph should stay unlabeled on screen. Sibling actions can keep a plain aria-label. Keep the strip as dense chrome — no empty preview band under it.

Library resultsCopy Anchor Link

Filter chips stay visible. An AT-only result count and compact 2 / 12 pagination with fuller screen-reader phrasing sit in the same library card.

Ask your agentCopy Anchor Link

Build an inbox card with a clean heading, a badged notifications control, and an unread count that screen readers hear but does not add extra chrome beside the title.