Laravel Visually Hidden Component

Free · MIT

Text that only a screen reader receives — still in the accessibility tree, never on screen.

A Visually Hidden built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::visually-hidden>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::button>
    <x-aura::icon name="trash" />
    <x-aura::visually-hidden>Delete order ORD-1042</x-aura::visually-hidden>
</x-aura::button>

See the full API, props and live examples in the Visually Hidden documentation.

Overview

Sometimes the screen already answers a question that speech does not. An icon-only button is obvious to a sighted user and silent to a screen reader; a "Read more" link makes sense beside its heading and makes none in a list of links.

<x-aura::visually-hidden> supplies the missing words. The content stays in the accessibility tree — unlike display: none or visibility: hidden, which remove it for everyone.

Props

Prop	Type	Default	Description
`as`	`string`	`'span'`	Element to render. Use `div` when the hidden content is block-level.
`focusable`	`bool`	`false`	Reveal it when it receives keyboard focus — see Skip Link.