@reach/visually-hidden

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 (
    <button>
      <VisuallyHidden>Save</VisuallyHidden>
      <span aria-hidden>????</span>
    </button>
  );
}

Current Tags

• 0.10.2                                ...           latest (5 years ago)
• 0.4.0-beta.0                                ...           next (6 years ago)

6 Versions

• 0.17.0                                ...           3 years ago
• 0.8.6                                ...           5 years ago
• 0.1.4                                ...           6 years ago
• 0.4.0                                ...           6 years ago
• 0.4.0-beta.0                                ...           6 years ago
• 0.10.2                                ...           5 years ago