- 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
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>
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";
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
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.
The content you want to be visually hidden.