A11y Broke My Build
summary
Built a small create-vue to-do app and wires accessibility checks into every step: eslint + vue-a11y for instant lint errors, unit tests that run Axe (jest-axe) to catch missing labels, buttons without distinguishable text and missing image alts, and Playwright end-to-end tests plus Lighthouse CI for site scans. Claims tools find about 40–57% of issues (humans up to 68%). Demo breaks the CI pipeline — accessibility fails prevent a merge.
AI-written summary · about
chapters (11)
- 0:00Accessibility testing intro
- 1:03Shift left for accessibility
- 2:28Todo app accessibility demo
- 3:11Automated accessibility linting
- 4:35Unit testing accessibility
- 6:23End-to-end accessibility tests
- 8:09Auditing multiple sites
- 9:14Combine accessibility tools
- 9:57CI pipeline integration
- 10:19Accessibility breaks build
- 10:49Q&A
