Sweet, savory, and fresh! Accessible design system Storybook tests
summary
Claim: embed accessibility checks into component work so violations show up in Storybook, the tests actually run Axe via the Storybook accessibility add-on and integrate with Playwright + Axe or Cypress, display the accessibility tree, and let editors change props live to prove fixes. A WebAIM Million scan shows rising issues (about 24.2% more detected ARIA problems in one comparison). Demoed fixes include swapping a color to meet contrast and removing a link nested inside a button so the story passes and CI can enforce it.
AI-written summary · about
chapters (8)
- 0:00Accessible design system testing
- 1:49Accessibility testing matters
- 3:39Storybook for component-driven dev
- 5:27Playwright and axe accessibility
- 6:31Storybook accessibility add-on demo
- 9:07Debugging accessibility violations
- 11:14Manual testing beyond automation
- 14:47Summary
related talks
46mA11Y with Vue - Can everyone reach your application?
32mWeb Accessibility testing with playwright.js & axe-core
35mAutomated Accessibility Testing
28mAutomating Accessibility with Playwright
59mImproving Accessibility Through Design Systems
44mTesting Web Accessibility
53mAutomating Accessibility Assurance
31mMy Accessibility Journey The Quest for an Accessible Components Library