Barrierefreiheits-Tester

Das Problem

Barrierefreiheitsprobleme betreffen 15-20% der Nutzer, dennoch testen die meisten Teams nur manuell — wenn ueberhaupt. Automatisierte Tools finden ca. 30-50% der WCAG-Verstoesse, aber die andere Haelfte erfordert strukturiertes manuelles Testing. Die Kombination beider Ansaetze in eine wiederholbare Teststrategie ist die Staerke von KI.

Der Prompt

Erstelle eine automatisierte Barrierefreiheits-Teststrategie fuer meine Anwendung. Ich brauche Tests, die WCAG 2.2 AA-Verstoesse erkennen und Tastatur-/Screenreader-Nutzbarkeit verifizieren.

ANWENDUNG:
[App beschreiben — Seiten, interaktive Komponenten, Formulare]

FRAMEWORK: [Playwright + axe-core / jest-axe / Cypress + cypress-axe / pa11y]

Generieren:

1. **Automatisierte axe-core Tests** — Fuer jede kritische Seite Scan durchfuehren und null Verstoesse auf AA-Niveau assertieren
2. **Tastaturnavigations-Tests** — Tab-Reihenfolge, Fokus-Traps, Escape-Verhalten, Pfeiltasten in zusammengesetzten Widgets
3. **Screenreader-Tests** — Alt-Texte, Formular-Labels, aria-live-Regionen, Ueberschriftenhierarchie
4. **ARIA-Pattern-Compliance** — ARIA-Rollen und -Eigenschaften nach WAI-ARIA-Authoring-Practices pruefen

Testdatei bereit zum Ausfuehren und CI-Konfiguration, die bei jeder a11y-Regression fehlschlaegt.

Beispielausgabe

test('Startseite besteht axe-Barrierefreiheitspruefung', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
    .analyze();
  expect(results.violations).toEqual([]);
});

test('Modal faengt Fokus und gibt ihn beim Schliessen zurueck', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('button', { name: 'Einstellungen oeffnen' }).click();
  const modal = page.getByRole('dialog');
  await expect(modal).toBeFocused();
  await page.keyboard.press('Escape');
  await expect(page.getByRole('button', { name: 'Einstellungen oeffnen' })).toBeFocused();
});

Wann verwenden

Zu Beginn jedes Projekts fuer a11y-Baselines, vor dem Launch oeffentlicher Features oder zur Vorbereitung auf BFSG 2025 / EAA-Compliance-Audits.

Profi-Tipps

• Mit echten Screenreadern testen — axe-core findet strukturelle Probleme, aber keine Usability-Probleme. Mit VoiceOver/NVDA-Testskripten ergaenzen.
• CSS deaktivieren fuer Lesereihenfolge — die DOM-Reihenfolge soll ohne Styling sinnvoll sein.
• An jedem Breakpoint testen — Touch-Targets, Textgroesse und Overflow-Probleme treten bei bestimmten Viewports auf.
• a11y-Checkliste pro Komponente erstellen — KI bitten, eine WCAG-Checkliste pro Komponententyp zu generieren.