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/

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

Prop	Type	Required
`as`	`string` `Component`	false
`children`	`node`	true

VisuallyHidden as

as?: keyof JSX.IntrinsicElements | React.ComponentType

A string representing an HTML element or a React component that will tell the VisuallyHidden what element to render. Defaults to span.

NOTE: Many semantic elements, such as button elements, have meaning to assistive devices and browsers that provide context for the user and, in many cases, provide or restrict interactive behaviors. Use caution when overriding our defaults and make sure that the element you choose to render provides the same experience for all users.

VisuallyHidden children

children: React.ReactNode

The content you want to be visually hidden.