A11y Broke My Build
summary
A tiny Vue to‑do app gets layered with automated checks: linting with ESLint + vue‑a11y, unit tests using axe‑core, and end‑to‑end checks with Playwright, plus pipeline hooks via Husky and lint‑staged. Automated tools catch roughly 40–57% of issues (humans ~68%), and crawlers like Pa11y find dozens per site (45 homepage, 22 ticket page; ~300 on NDC). The pipeline fails on a color‑contrast/link‑label bug, proving accessibility testing can—and should—break the build.
AI-written summary · about
chapters (9)
- 0:00Accessibility testing intro
- 1:30Shift accessibility left
- 3:46Linting for accessibility
- 5:41Unit testing components
- 7:49E2E testing with Playwright
- 9:40Why multiple testing layers
- 10:24Legacy projects with crawlers
- 12:36CI/CD tool integration
- 12:57Conclusion & Q&A
related talks
13mA11y Broke My Build
11mA11y Broke My Build
01h 06mnpm run a11y-test
29mBuilding Accessibility Testing into Your Workflow
43mLucky Nkosi: A11y Beyond the Theory: Integrating Accessibility Testing into Your Workflow
07mHow to Catch a11y Defects During Unit and E2E Testing
46mA11Y with Vue - Can everyone reach your application?
53mAutomating Accessibility Assurance