Hidden visually

Utility that provides the content to assistive technologies while hiding it from the screen.

Import

import { HiddenVisually } from "reshaped";
import type { HiddenVisuallyProps } from "reshaped";

Storybook

Hidden visually stories


<HiddenVisually>Available only to screen readers</HiddenVisually>

Hides content while keeping screen readers announcements

Usage

HiddenVisually will hide everything passed as children from the screen but will still read that content when navigating with a screen reader. This way, you can add extra information for screen reader users.

<HiddenVisually>Available only to screen readers</HiddenVisually>