Visually Hidden

Content that is visually hidden while remaining available to assistive technology.


Package	`@vizejs/ui/visually-hidden`
Maturity	stable
Own the source	`vize lib pull visually-hidden`
Requires	—
Aliases	screen reader only, sr-only, visually hidden
Covers	React Aria VisuallyHidden, Radix VisuallyHidden

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { VisuallyHidden } from "@vizejs/ui/visually-hidden";

Or copy the source into your project with vize lib pull visually-hidden (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Icon-only button whose accessible name is supplied by visually hidden text. -->
<script setup lang="ts">
import { VisuallyHidden } from "@vizejs/ui/visually-hidden";
</script>

<template>
  <button type="button">
    <span aria-hidden="true">&times;</span>
    <VisuallyHidden>Close dialog</VisuallyHidden>
  </button>
</template>

API

`VisuallyHidden`

Source: src/families/accessibility/visually-hidden/visually-hidden.vue

Exposed

Member	Type	Description
`element`	`Readonly<ShallowRef<HTMLElement \| null>>`	Template ref to the rendered root element.

Behavior

Normative state × input → outcome table for visually-hidden.vue (@vizejs/ui/visually-hidden). Rows V1–V3 are proven by the named test in src/families/accessibility/visually-hidden/visually-hidden.test.ts; V4 is proven on the packaged stylesheet by src/families/foundations/theme/style-pipeline.test.ts.

#	State	Input	Outcome	Proven by
V1	slotted control	render	content stays queryable by role and accessible name, and Tab-reachable	`keeps slotted content queryable in the accessibility tree`
V2	any	render	exposed `element` is the rendered node	`exposes the rendered element for composition`
V3	any	render	hidden by clipping (`clip-path`), never `display:none` (source contract)	`hides content with a recoverable clipping technique, never display:none`
V4	slotted control	focus moves in	content stays clipped; revealing on focus is a different, opt-in component	`authored nesting, layers, logical properties, and color functions compile to the floor`

CSS custom properties

Custom property	Purpose	Default
`--vize-ui-visually-hidden-background`	Repaint the clipped box (for example while debugging layout)	`oklch(0% 0 0 / 0%)`