VisuallyHidden

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

#Installation

xxxxxxxxxx

npm install reakit

Learn more in Get started.

#Usage

xxxxxxxxxx

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.

#Composition

• VisuallyHidden uses Role.

Learn more in Composition.

#Props

#VisuallyHidden

No props to show