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
: 613 Bytes
Install: 
npm install @washingtonpost/wpds-visually-hidden
|Copy
Usage: 
import { VisuallyHidden } from "@washingtonpost/wpds-visually-hidden"
|Copy

Table of Contents

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>