reakit/src/VisuallyHidden/README.md

Toolkit for building accessible rich web apps with React

---
path: /docs/visually-hidden/
---

# VisuallyHidden

`VisuallyHidden` is a common techinique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.

<carbon-ad></carbon-ad>

## Installation

```sh
npm install reakit
```

Learn more in [Get started](/docs/get-started/).

## Usage

<!-- eslint-disable import/no-unresolved -->

```jsx
import { Button } from "reakit/Button";
import { VisuallyHidden } from "reakit/VisuallyHidden";
import UniversalAccess from "./UniversalAccess";

function Example() {
  return (
    <Button>
      <VisuallyHidden>Universal Access</VisuallyHidden> <UniversalAccess />
    </Button>
  );
}
```

## Accessibility

- `VisuallyHidden` has all the styles necessary to hide it from visual clients, but keep it for screen readers.

Learn more in [Accessibility](/docs/accessibility/).

## Composition

- `VisuallyHidden` uses [Role](/docs/role/).

Learn more in [Composition](/docs/composition/#props-hooks).

## Props

<!-- Automatically generated -->

### `VisuallyHidden`

No props to show