Import
import { VisuallyHidden } from "@fuegokit/react";
Usage
Use Visually Hidden to provide text for screen readers that is visually hidden.
In the following example, screen readers will announce "Appfire" and ignore the Logo svg; the browser displays the Logo svg and ignores the text.
With icon-only buttons and elements, Visually Hidden provides an accessible experience to people who use screen readers.
Accessibility
Visually Hidden uses position:absolute, overflow:hidden, and clip: 'rect(0 0 0 0)' as well as other battle-tested CSS properties to hide elements from sighted users. It works across all major browsers and has no effect on layout.
Do not use display: none or visibility:hidden to hide elements from sighted users that is intended for screen readers, as this will hide the contents from screen-reader users as well.
Do
Use Visually Hidden to provide an accessible experience to users of assistive technologies.
Don't
Don't use `display:none` or `visibility:hidden` as those will hide the contents from screen-reader users.