Visually Hidden

Text that screen readers read but the screen does not show, such as the rest of a link’s name or what a strikethrough means.

Beta

Web

iOS

Android

@advui/core

Source

Complete a link’s name

Preview

Code

Plans for teams

Shared billing, seats and roles for every workspace.

Single sign-on

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { VisuallyHidden } from '@advui/core'

<Link href="/pricing">
  Read more<VisuallyHidden> about pricing</VisuallyHidden>
</Link>

<Text textDecorationLine="line-through">
  <VisuallyHidden>Was </VisuallyHidden>$120
</Text>

Examples

Say what a strikethrough means

The prices read as “Was $120” and “Now $84”.

Preview

Code

Trail running shoes

Was $120Now $84

API reference

VisuallyHidden

A Text kept in a 1px box with a trace of opacity, so screen readers still find it. A `span` on web. Takes Text props, such as `role` or `aria-live`.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The words to read. Start them with a space when they follow other text: “Read more<VisuallyHidden> about pricing</VisuallyHidden>”.

Accessibility

It stays in the accessibility tree: no display: none, visibility: hidden or aria-hidden, and a trace of opacity, since Android leaves views with no opacity out of the tree.
Inside a Link or a Heading its words join that element’s name. On its own it is read where it stands: on iOS and Android as a separate stop.
Do not hide words that sighted users also need. A status shown only by color needs visible text or an icon, not just hidden text (WCAG 1.4.1).
With role="status" it is a polite live region on web. iOS and Android do not read live regions: announce changes there with AccessibilityInfo.announceForAccessibility.

Platform notes

Web

A span in a 1px box with overflow: hidden and white-space: nowrap, so VoiceOver on macOS does not read its words one at a time.

iOS

A 1pt box with a trace of opacity, its words drawn transparent at almost no size. Inside another Text the box does nothing, but the words stay invisible, and they stay in that text, which VoiceOver reads.