blatui

Components

Visually Hidden

Hide content visually while keeping it available to screen readers, with an optional skip-link mode.

php artisan blatui:add visually-hidden
(label announced to screen readers, hidden visually) 
<div class="flex items-center gap-2 text-sm">
    <button type="button" class="inline-flex size-9 items-center justify-center rounded-md border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground">
        <x-lucide-trash-2 class="size-4" aria-hidden="true" />
        <x-ui.visually-hidden>Delete item</x-ui.visually-hidden>
    </button>
    <span class="text-muted-foreground">(label announced to screen readers, hidden visually)</span>
</div>

Skip Link

Skip to content Press Tab to reveal the skip link. 
<div class="flex flex-col gap-2 text-sm">
    <x-ui.visually-hidden as="a" href="#main" :focusable="true">Skip to content</x-ui.visually-hidden>
    <span class="text-muted-foreground">Press <x-ui.kbd>Tab</x-ui.kbd> to reveal the skip link.</span>
</div>