ToDo: Test Driven Development and Accessibility
summary
Claim: start accessibility from day one by driving a small ToDo app with Test Driven Development. The demo builds add / complete / delete features in React with tests written using Testing Library and Playwright for UI and Playwright accessibility checks, plus Biome/ESLint static rules and Wave for manual checks. WCAG counts mentioned (A ~30, AA ~20, AAA ~28). Implementation uses simple Date.now IDs, found missing alt text and semantic issues, fixes make tests pass and a11y checks green.
AI-written summary · about
chapters (21)
- 0:00Introduction and speaker intro
- 1:29Accessibility testing myths
- 3:17Starting with TDD for accessibility
- 5:50TDD cycle explained
- 8:00Testing pyramid and tools
- 11:16Building the to-do app with TDD
- 13:50First test fails and passes
- 15:39Crossing off to-dos
- 19:54Refactoring and improving structure
- 23:53Deleting to-dos
- 27:07Adding styles and images
- 28:11Static code analysis with Biome
- 30:39Reflection on accessibility
- 33:07European Accessibility Act
- 37:20WCAG compliance check
- 40:12Browser extensions for accessibility
- 42:00Playwright accessibility testing
- 42:41Color contrast importance
- 44:09Final to-do app showcase
- 44:51Accessibility ladder steps
- 47:19Summary and Q&A
related talks
01h 05mAccessibility + TDD == easy && !impossible
25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJS
33mAutomated Accessibility Testing
13mA11y Broke My Build
29mBuilding Accessibility Testing into Your Workflow
45mTips from the Trenches: Accessibility Testing
34mBuilding Accessible Web Apps in React
01h 05mAccessibility Testing 101