Skip to main content
WireKit
Copy for LLM

Visually Hidden

A screen-reader-only wrapper that hides content visually while keeping it accessible to assistive technology. Equivalent to Tailwind's sr-only class.

Basic Usage

Visually hidden text with visible button 
<x-wirekit::button intent="neutral" surface="ghost">
    <x-wirekit::icon name="close" class="h-5 w-5" />
    <x-wirekit::visually-hidden>Close dialog</x-wirekit::visually-hidden>
</x-wirekit::button>

With Icon Button

Common pattern: icon-only buttons with a hidden accessible label.

Icon button with hidden label 
<x-wirekit::row gap="sm">
    <x-wirekit::button intent="neutral" surface="ghost">
        <x-wirekit::icon name="edit" class="h-5 w-5" />
        <x-wirekit::visually-hidden>Edit</x-wirekit::visually-hidden>
    </x-wirekit::button>
    <x-wirekit::button intent="neutral" surface="ghost">
        <x-wirekit::icon name="info" class="h-5 w-5" />
        <x-wirekit::visually-hidden>Help</x-wirekit::visually-hidden>
    </x-wirekit::button>
</x-wirekit::row>

Props

Prop Type Default Description
as string 'span' HTML element to render
scope string|null null Scoped personalization name

Accessibility

This component uses the sr-only technique to visually hide content while keeping it in the accessibility tree. It's essential for:

  • Icon-only buttons that need accessible labels
  • Skip navigation links
  • Form labels that are visually implied by context
  • Status messages for screen readers

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Was this page helpful?

Voting requires cookies or local storage. What we store