Components / Utilities

VisuallyHidden

Visually hide text while keeping it available to assistive technology.

Preview

Use cases

Icon button name

Keep a text label available to assistive technology when only an icon is visible.

Additional context

Add a short explanation that visual layout already conveys.

Usage example

Vue

<button type="button">
  <Icon aria-hidden="true" />
  <VisuallyHidden>Open settings</VisuallyHidden>
</button>

More examples

Named close button

A text node can name a button without displaying a second visible label.

Named close button

<script setup lang="ts">
import VisuallyHidden from './components/ui/visually-hidden/VisuallyHidden.vue'
</script>

<template>
  <button type="button"><span aria-hidden="true">×</span><VisuallyHidden>Close panel</VisuallyHidden></button>
</template>

Table caption

A hidden caption keeps table context without consuming visual space.

Table caption

<script setup lang="ts">
import VisuallyHidden from './components/ui/visually-hidden/VisuallyHidden.vue'
</script>

<template>
  <table><caption><VisuallyHidden>Quarterly revenue by region</VisuallyHidden></caption>
    <thead><tr><th scope="col">Region</th><th scope="col">Revenue</th></tr></thead>
    <tbody><tr><th scope="row">North</th><td>€120,000</td></tr></tbody>
  </table>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for VisuallyHidden
Name	Type	Default or requirement
`as`	span \| div	span
`focusable`	boolean	false

Set focusable only when the hidden content itself must enter the tab order.

Implementation notes

Use hidden text only when the visible UI supplies enough context for sighted readers.
Focusable hidden content is an exceptional case; leave focusable false for ordinary labels.

Accessibility and localization

Hidden text remains in the accessibility tree and can provide a control name or table context.