Skip to content

VisuallyHidden

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.

<button>
  <VisuallyHidden>Save</VisuallyHidden>
  <svg aria-hidden width="32" height="32">
    <path d="M16 18l8-8h-6v-8h-4v8h-6zM23.273 14.727l-2.242 2.242 8.128 3.031-13.158 4.907-13.158-4.907 8.127-3.031-2.242-2.242-8.727 3.273v8l16 6 16-6v-8z"></path>
  </svg>
</button>

Installation

npm install @reach/visually-hidden
# or
yarn add @reach/visually-hidden

And then import it:

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

Props

PropType
childrenfunc

children

Type: node