Design system

Visually Hidden

A common pattern used in web applications is to hide content from sighted users but still maintain it for screen readers.

Bundle size: NaN undefined
Install:
npm install @washingtonpost/wpds-visually-hidden
|Copy
Usage:
import { VisuallyHidden } from "@washingtonpost/wpds-visually-hidden"
|Copy

Options

VisuallyHidden accepts props.children to set the label.


Accessibility

Visually hides an element from sighted users but still maintains it for screen readers and other assistive technologies. This is a common pattern used in web applications.


Implementation

<VisuallyHidden>My important label for screen readers</VisuallyHidden>