How to build an accessible VisuallyHidden in React
Applies the standard clip technique so content stays in the DOM and accessibility tree while being painted off-screen — assistive tech reads it, sighted users do not see it
When to use a VisuallyHidden
- Giving an icon-only control an accessible name without showing text
- Adding screen-reader-only context that would be redundant visually
- Providing off-screen labels for tables, links, or form controls
When not to use it
- Hiding content from everyone — use hidden or display:none
- Temporarily hiding then revealing UI — use conditional rendering
Accessibility
Role none, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Wrapping decorative content in VisuallyHidden to "clean up" the layout
Prefer: aria-hidden on decorative elements; VisuallyHidden only for content screen readers need
VisuallyHidden keeps content in the accessibility tree — using it to hide noise pollutes screen-reader output
Example
<button type="button"><CloseIcon /><VisuallyHidden>Close dialog</VisuallyHidden></button>