Components
Visually Hidden
A component that uses the visuallyHidden utility to hide text from screen.
Best Practices
Use in moderation. You should strive for parity between visual and screen reader versions of your content, so consider if there are other options for achieving the same goal without hiding content.
One example for when to use this, is to add supporting context to links so screenreader users get more information when scanning a page’s links.
<Link href="link-to-article.html"> Read more<VisuallyHidden> about pirates</VisuallyHidden>...</Link>“Use these techniques judiciously! Keep in mind that many screen reader users have some vision—what they see and what they hear should typically be in harmony. In general, screen reader-only content should be reserved for information is apparent visually but not apparent to blind screen reader users.” (Source: WebAIM article on visually hiding text).