frontend-a11y

Constraints

• Apply @rules/laravel/livewire.mdc — keep Blade presentation-only; use wire:model for bindings; components stay slim.
• Apply @rules/laravel/filament.mdc — reuse Filament's built-in accessible form/action components rather than rebuilding them.
• Apply @rules/security/frontend.md — sanitize any dynamic content before DOM insertion; prefer textContent/setAttribute over innerHTML.
• Stack is Blade + Livewire + Alpine.js + Filament + Tailwind. No React/Vue/Next — never output useState/useEffect/useRef/JSX.

Use when

• Building or reviewing forms (<input>, <select>, <textarea>).
• Creating interactive elements (modals, dropdowns, tabs, tooltips) with Alpine.
• Adding <div>/<span> with wire:click or x-on:click instead of a button.
• Adding any aria-* attribute.
• Managing focus or announcing async updates after a Livewire round-trip.
• Acting on accessibility feedback from a review tool.

---

Form accessibility

Missing for/id pairing and disconnected error messages are the most commonly flagged issues. Livewire's @error directive pairs naturally with aria-describedby.

Label connection

{{-- BAD: no association --}}
<label>Email</label>
<input type="email" wire:model="email">

{{-- GOOD: for matches id --}}
<label for="email">Email</label>
<input id="email" type="email" wire:model="email">

Required fields

{{-- visual asterisk hidden from SR; required + aria-required convey state --}}
<label for="email">Email <span aria-hidden="true">*</span></label>
<input id="email" type="email" required aria-required="true" wire:model="email">

Error association with Livewire

<label for="email">Email <span aria-hidden="true">*</span></label>
<input
    id="email"
    type="email"
    wire:model.blur="email"
    autocomplete="email"
    @error('email') aria-invalid="true" aria-describedby="email-error" @enderror
>
@error('email')
    <span id="email-error" role="alert" class="text-danger">{{ $message }}</span>
@enderror