Skip to content

Visually Hidden

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

From the command line in your project directory, run npm install @reach/visually-hidden or yarn add @reach/visually-hidden. Then import the component:

npm install @reach/visually-hidden# oryarn add @reach/visually-hidden
import VisuallyHidden from "@reach/visually-hidden";

Component API

VisuallyHidden

VisuallyHidden Props

PropTypeRequired
childrennodetrue
VisuallyHidden children

children: React.ReactNode

The content you want to be visually hidden.