Problem
A global financial services group was expanding its digital platform into Canada with a hard regulatory requirement: full AODA (Accessibility for Ontarians with Disabilities Act) compliance before launch. The existing React codebase had been built without accessibility as a design constraint — interactive components, data tables, and form flows all failed basic screen reader testing. The Canada launch was a fixed deadline tied to regulatory approval.
Role
Senior Frontend Engineer (onsite, Toronto). I was responsible for the AODA remediation of the core account management and transaction history interfaces, working alongside the product team to ensure new features were built accessible-first.
Stack
- Accessibility framework: WCAG 2.1 AA as the compliance baseline (AODA maps to WCAG 2.0 AA, but we targeted 2.1)
- Testing: axe-core for automated checks in CI; NVDA + JAWS for manual screen reader testing; keyboard-only navigation testing protocol
- Component patterns: ARIA live regions for dynamic content updates (balance changes, transaction filtering), focus management on modal/drawer open and close
- Design system: Built accessible data table component (sortable, paginated) with full keyboard interaction per ARIA Authoring Practices Guide
- Process: Introduced "accessibility story" requirement in Definition of Done — every component required an accessibility acceptance criteria before PR approval
Outcome
- All targeted interfaces passed AODA compliance audit before the Canada launch deadline
- Accessible data table component adopted as the standard across the platform — used in 7 page types
- Zero accessibility-related defects raised in post-launch review
- Accessibility story process adopted by the wider team, carried forward after the engagement ended