FilamentF
Filament•10mo ago
Crispy

Screen Reader Accessibility for Filament Modals?

Hey everyone,

I'm working on making my Laravel Filament site accessible for a blind caseworker using a screen reader (macOS VoiceOver). The issue I'm facing is that modals don’t announce themselves when opened. I want the click that triggers the modal to notify the screen reader of the new content.

What I've Tried:

  • Adding 'aria-live' => 'assertive' inside extraModalWindowAttributes().
  • Changing it to 'role' => 'alert'—which forces the announcement, but causes the entire modal to be re-read every time an additional field is revealed, which is disruptive.
  • Using both 'role' => 'alert' and 'aria-live' => 'polite', but that didn't work as expected.
Here’s a snippet of my current setup: 

$this->icon('heroicon-o-plus')
    ->color('success')
    ->label('Add Need')
    ->size('xs')
    ->form([
        Grid::make()->schema([
            TextInput::make('custom')
                ->label('Item Name'),
            // ...
        ]),
        Hidden::make('tier'),
        Hidden::make('name'),
        Hidden::make('need'),
    ])
    ->extraModalWindowAttributes([
        'aria-label' => 'Add Need Modal opened.',
        'role' => 'alert',
        'aria-live' => 'polite'
    ]);


What I Need Help With:

How can I get the modal to announce itself only when it opens, without re-reading everything on every state update? Has anyone successfully handled this in Filament?

Would appreciate any insights! Thanks in advance. 🚀

I have limited experience with PHP, Filament, lararavel and livewire. Also any other resources on Laravel Filament Accessibility standards, tricks, documentation would be very helpful, the information I've found has been very limited.
Was this page helpful?