1 | # @reach/visually-hidden
|
2 |
|
3 | [![Stable release](https://img.shields.io/npm/v/@reach/visually-hidden.svg)](https://npm.im/@reach/visually-hidden) ![MIT license](https://badgen.now.sh/badge/license/MIT)
|
4 |
|
5 | [Docs](https://reach.tech/visually-hidden) | [Source](https://github.com/reach/reach-ui/tree/main/packages/visually-hidden) | [Origin](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility) | [Further reading](https://a11yproject.com/posts/how-to-hide-content/)
|
6 |
|
7 | Provides text for screen readers that is visually hidden. It is the logical opposite of the `aria-hidden` attribute.
|
8 |
|
9 | In the following example, screen readers will announce "Save" and will ignore the icon; the browser displays the icon and ignores the text.
|
10 |
|
11 | ```jsx
|
12 | import { VisuallyHidden } from "@reach/visually-hidden";
|
13 |
|
14 | function Example() {
|
15 | return (
|
16 | <button>
|
17 | <VisuallyHidden>Save</VisuallyHidden>
|
18 | <span aria-hidden>💾</span>
|
19 | </button>
|
20 | );
|
21 | }
|
22 | ```
|