Visually Hidden

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.

<Link href={`https://appfire.com`}>
  <VisuallyHidden>Appfire</VisuallyHidden>
  <Logo variant={`solid`} size={36} />
</Link>

With icon-only buttons and elements, Visually Hidden provides an accessible experience to people who use screen readers.

<UnstyledButton onClick={() => alert('open settings')}>
  <AkEditorSettingsIcon />
  <VisuallyHidden>Open settings</VisuallyHidden>
</UnstyledButton>

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

Do

Use Visually Hidden to provide an accessible experience to users of assistive technologies.

Don't

Don't

Don't use `display:none` or `visibility:hidden` as those will hide the contents from screen-reader users.

Further reading