Skip to main content
Skip to docs content

Speakable for Design Systems

How to integrate accessibility testing into your component library workflow, from component creation through team-wide consumption.

The Cost of Late Discovery

Finding a missing aria-label during component development takes 30 seconds to fix. Finding it in production after a user complaint involves triage, sprint planning, regression testing, and redeployment.

30 seconds

Fix during dev

2-4 hours

Fix during QA

1-2 sprints

Fix in production

Where Speakable Fits

Component Creation

Define expected screen reader output in specs

Storybook Development

Runtime analysis captures behavior timelines per story

Pull Request

Semantic diff detects accessibility regressions before merge

CI/CD Pipeline

Automated baselines catch behavior changes across builds

Storybook Integration

Speakable connects to your running Storybook, discovers all stories, and runs runtime analysis per component variant. You get an accessibility timeline for every story: focus events, state changes, and announcements captured during interaction.

speakable runtime http://localhost:6006 --storybook

Story Results

Button0 warnings
Dialog1 warning
Combobox0 warnings

Component-Level Regression Detection

Speakable stores baseline timelines per story and compares them on every PR. When behavior diverges, you see exactly what changed before it reaches users.

Previous Build

focus: "Submit" button
focus: "Email" textbox
focus: "Cancel" button

Current Build

focus: "Submit" button
focus: "body" (unexpected)
focus: "Cancel" button

Team-Wide Adoption

1

Start with one component

Run Speakable on your most-used component

2

Expand to your library

Add Storybook integration for all stories

3

Enforce in CI

Baseline all components and fail builds on regressions

4

Share across teams

Component consumers inherit verified accessibility

What Teams Catch

Modal opens without moving focus

Heuristic Warning

Combobox stops announcing selected option

Timeline Diff

Tab order changes after refactor

Focus Regression

Button loses accessible name

Static Audit

Accordion stops announcing expanded state

State Change Diff

Dialog doesn't return focus on close

Heuristic Warning

Related Pages

Runtime Analysis

Capture accessibility timelines during component interaction to detect runtime behavior issues.

Testing Strategy

Build a comprehensive accessibility testing program that catches issues early.

Component Patterns

Accessible patterns for common UI components including dialogs, comboboxes, and tabs.

CI/CD Integration

Automate accessibility checks in your continuous integration pipeline.