@reach/visually-hidden

What is @reach/visually-hidden?

@reach/visually-hidden is a React component that allows you to hide content visually while keeping it accessible to screen readers. This is useful for providing additional context or instructions to users who rely on assistive technologies without cluttering the visual interface.

What are @reach/visually-hidden's main functionalities?

Visually Hidden Text

This feature allows you to hide text visually while keeping it accessible to screen readers. This is useful for adding extra context or instructions for screen reader users.

<VisuallyHidden>This text is hidden visually but accessible to screen readers.</VisuallyHidden>

Visually Hidden Input Labels

This feature allows you to hide input labels visually while keeping them accessible to screen readers. This ensures that forms are accessible without cluttering the visual design.

<label><VisuallyHidden>Username</VisuallyHidden><input type='text' name='username' /></label>

0

README

@reach/visually-hidden

Docs | Source | Origin | Further reading

Provides text for screen readers that is visually hidden. It is the logical opposite of the aria-hidden attribute.

In the following example, screen readers will announce "Save" and will ignore the icon; the browser displays the icon and ignores the text.

import { VisuallyHidden } from "@reach/visually-hidden";

function Example() {
	return (
		<button>
			<VisuallyHidden>Save</VisuallyHidden>
			<span aria-hidden>💾</span>
		</button>
	);
}