Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add visually-hidden

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

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.

Basic Usage

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

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.

When not to use it

Hidden text is a repair, not a design. If the visible label could simply say what it means, change the label instead — everyone benefits, and there is one less string to keep in sync.

Never hide text that the sighted user also needs, and never use it to stuff keywords: it is read aloud, so padding it wastes a real person's time.

Notes

aura:doctor --a11y flags icon-only buttons and unlabelled fields. This component, or an aria-label, is the usual fix.