Skip to main content
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: 0
Install: 
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage: 
import { VisuallyHidden } from "@washingtonpost/wpds-ui-kit"
|Copy
Storybook:  View on Storybook
Source:  View on Github

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>
Edit this page on GitHub.
CommunityXTwittergithubGithubyoutubeYoutube