Visually Hidden

VisuallyHidden is used for web accessibility to hide content from the visual client, but keep it readable for assistive technology, such as screen readers.

Import

import { VisuallyHidden } from '@outfitio/outkit';

Usage

Example

Another Example

Accessibility

Use VisuallyHidden to provide additional instructions for assistive technologies. For example, it could be used to indicate if a piece of interactive content is incompatible with a screenreader.

Best Practice

Never use VisuallyHidden to hide information that could be potentially useful to visual clients, such as keyboard instructions.

Props