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

Options
Accessibility
Implementation

Options

VisuallyHidden accepts props.children to set the label.


Open in Playroom

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>