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" size="md" />
    <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" size="md" />
        <x-wirekit::visually-hidden>Edit</x-wirekit::visually-hidden>
    </x-wirekit::button>
    <x-wirekit::button intent="neutral" surface="ghost">
        <x-wirekit::icon name="info" size="md" />
        <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
Form labels that are visually implied by context
Status messages for screen readers

Not for skip links

A skip link built out of this component is broken in the one moment it exists for: sr-only keeps the anchor hidden even while it has focus, so a keyboard user tabs onto a link they cannot see and has no idea what pressing Enter will do. A skip link has to become visible on focus.

Use <x-wirekit::skip-link>, which is sr-only until :focus-visible and then pops out of the flow.

Keyboard Interaction

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

Was this page helpful?

Thank you for your feedback!

What was missing? (optional)

Voting requires cookies or local storage. What we store