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.
01 / Story-Prüfpult
States und Prüfschichten kombinieren, Lücken sofort sehen.
Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört das Prüfpult Ihnen.
Story-Prüfpult
States durch drei Prüfschichten führen
Coverage-Matrix
Dialog.stories
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.
Prüfplan bereit. Vier Stories durchlaufen drei Prüfschichten.
02 / Der Unterschied
Die Matrix deckt Komponenten ab, nicht die veröffentlichte Seite.
Getestete Stories, ungetestete Seiten
addon-a11y bewertet nur den gerenderten Zustand einer einzelnen Story. Tastaturwege, Zustände ohne eigene Story und das Zusammenspiel der Komponenten auf der ausgelieferten Seite bleiben ohne gesonderte Tests ungeprüft.
Was der Website-Check ergänzt
Der Scan prüft die veröffentlichte Seite auf automatisch erkennbare Barrieren – etwa Kontraste, Alt-Texte, Feldbeschriftungen und Fokusmarkierungen, dort wo alle Komponenten real zusammenwirken.
Fundstellen statt Prüflücken
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos, ohne Installation, direkt aus der URL.
03 / Auf Ihrer Website
Jetzt die veröffentlichte Seite prüfen.
Das Prüfpult plant Tests im Storybook. Der Website-Check prüft das ausgelieferte Ergebnis auf automatisch erkennbare Barrieren.
Der Website-Check ist bereit.
- 1URL
- 2Auswahl
- 3Prüfung
- 4Ergebnis