storybook accessibility testing

storybook accessibility testing beginnt mit den richtigen Stories.

addon-a11y prüft den gerenderten DOM. Zustände, Bedienabläufe und manuelle Prüfungen müssen Sie als eigene Stories und Gates einplanen.

Story-Prüfpult

States durch drei Prüfschichten führen

12 PrüfpunktePrüfplan komplett
Stories abdecken
Prüfschichten

Coverage-Matrix

Dialog.stories

Storyaxeplaymanuell
DefaultPlan Plan Plan
KeyboardFocusPlan Plan Plan
OpenPlan Plan Plan
ErrorPlan Plan Plan

CSF-Ticket

Gate in Code übersetzen

import { expect, within } from 'storybook/test';

export const AccessibilityGate: Story = {
  args: { open: true },
  parameters: {
    a11y: { test: 'error' }
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await expect(canvas.getByRole('dialog')).toBeVisible();
  }
};

„Plan“ ist noch kein Ergebnis. Automation erkennt nur prüfbare Regeln; Bedienung und Nutzungskontext bleiben eigene Tests.