@reach/visually-hidden

@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>
	);
}