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.