VisuallyHidden

Primitive #6

🔍 Problem it solves

An icon button with no text is inaccessible to screen reader users. You need a label, but you don't want visible text cluttering the UI.

✅ Solution

CSS that visually hides content (position: absolute, clip, etc.) but keeps it readable by assistive technology (screen readers).

🧩 Used by components

IconButton, LoadingSpinner, CustomCheckbox, SkipLink, CloseButton, ThemeToggle

🎮 Interactive demo

💡 Screen reader test: The star button has hidden text "Rate this item". Visually you don't see it, but a screen reader will announce it.