Render text that is announced to screen readers but visually hidden.

Usage no npm install needed!

<script type="module">
  import reachVisuallyHidden from 'https://cdn.skypack.dev/@reach/visually-hidden';



Stable release MIT license

Docs | Source | Origin | Further reading

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.

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

function Example() {
  return (
      <span aria-hidden>💾</span>