VisuallyHidden
← looks icon-only, announced as “Close”
VisuallyHidden hides content visually while keeping it available to assistive
technology. Use it to give an icon button a name, or to add context a screen
reader needs but the layout already implies.
Usage
import { VisuallyHidden } from "@sina-design-system/core";
<button>
<Icon icon={X} decorative />
<VisuallyHidden>Close dialog</VisuallyHidden>
</button>Examples
You can't see the hidden text in either preview, but a screen reader announces it, so the icon-only button reads as "Close, button".
Icon-only button · name from hidden text
you see the glyph — a screen reader announces “Close, button”
Standalone screen-reader context
Step 2 of 4sighted: “Step 2 of 4” · announced: “Step 2 of 4 — Account details”
Accessibility
This is the accessible way to hide text, unlike display: none (which removes it
for everyone) or off-screen hacks (which can misbehave). Reach for it whenever the
visual design omits a label that a screen reader still needs.