Laravel A11y

Blade-spezifische Prüfpunkte

Bilder:

• <img> ohne alt → Fix: alt="" (dekorativ) oder beschreibender Text
• Spatie MediaLibrary: alt aus custom_properties.alt ziehen

Formulare:

• Jedes Input braucht <label for="id"> oder aria-label
• Livewire wire:model Inputs: Label nicht vergessen
• Fehlermeldungen: @error Block mit role="alert" oder aria-describedby

Interaktive Elemente:

• Alpine.js Toggles: aria-expanded, aria-controls setzen
• Modals: role="dialog", aria-modal="true", Focus-Trap
• Custom Dropdowns: role="listbox", Keyboard-Navigation

Navigation:

• Skip-Link: <a href="#main-content" class="sr-only focus:not-sr-only">
• <nav aria-label="Hauptnavigation"> – nicht nur <nav>
• Mobile-Menü: aria-expanded auf Toggle-Button

Dynamischer Content:

• Livewire-Updates: aria-live="polite" auf Container
• Loading States: aria-busy="true" während Laden

Pest-Test Beispiele

it('all images have alt attributes', function () {
    $response = $this->get('/');
    $response->assertDontSee('<img ', false); // Oder:
    // DOM parsen und prüfen dass jedes <img> alt hat
});

it('all forms have labels', function () {
    $response = $this->get('/kontakt');
    $response->assertSee('<label', false);
});

it('skip link exists', function () {
    $response = $this->get('/');
    $response->assertSee('skip', false);
});

it('page has exactly one h1', function () {
    $response = $this->get('/');
    expect(substr_count($response->getContent(), '<h1'))->toBe(1);
});

Tools zur Validierung

• axe DevTools (Chrome Extension) – automatisierter Scan
• WAVE (WebAIM) – visuelles Overlay
• Lighthouse (Chrome) – A11y Score
• VoiceOver (macOS) – Screenreader-Test

Report-Format

# A11y Audit – {Projekt}

## Zusammenfassung
{X} Kritisch, {Y} Wichtig, {Z} Hinweise

## Findings
| # | Severity | WCAG | Problem | Datei | Fix |
|---|----------|------|---------|-------|-----|
| 1 | Kritisch | 1.1.1 | Bild ohne alt | show.blade.php:42 | alt="" hinzufügen |