Visually Hidden
Hide content visually while keeping it available to assistive technology.
Use VisuallyHidden to hide content from sight while keeping it in the accessibility tree and the
document flow. Screen readers still announce it, and it can be referenced by
aria-labelledby/aria-describedby. Unlike display: none or the hidden attribute, the content
is not removed from assistive technology.
Reach for it when meaning is conveyed visually but needs a text equivalent — a label behind an icon-only control, extra context for a link, or a status message inside a live region.
Rated 4 out of 5 stars
Render a different element
By default VisuallyHidden renders a span. Pass elementType to render a different element — a
semantic heading, label, or list item — while keeping the hidden styles. No render prop or prop
spreading required.
<VisuallyHidden elementType="h2">Search results</VisuallyHidden>