Accessible Micro-Frontends at Scale
Drove WCAG 2.2 AA compliance across a federated micro-frontend ecosystem, contributing to shared component patterns and accessibility audit processes.
The Problem
The platform is composed of independently deployed micro-frontends built by different teams. Each team made their own accessibility decisions, leading to inconsistent focus management, broken heading hierarchies, contrast failures, and no automated checking. A platform-wide audit revealed dozens of WCAG 2.2 AA violations.
Approach
Rather than treating accessibility as a per-team responsibility, drove a centralised approach: shared accessibility contracts between MFEs, baked-in a11y in the component library, automated axe-core checks in every CI pipeline, and regular assistive technology testing sessions. The goal was to make the accessible path the easy path.
Architecture
The shell application owns page-level semantics (h1, skip links, live regions) and exposes a focus management contract that each MFE implements during navigation. The shared component library handles form labelling, error association, and keyboard interactions. axe-core runs via @axe-core/playwright in CI with a zero-violations merge requirement. Design tokens include automated contrast validation at build time.
Results
Zero critical accessibility violations sustained over an extended period. 4.5:1 minimum contrast ratio enforced at the design token level. Focus management contract adopted across all MFE teams. QA accessibility bugs dropped significantly after CI integration. The approach became the standard for new MFE development.
Lessons Learned
Accessibility at scale is a systems problem, not a checklist. Building a11y into shared components is 10x more effective than documenting requirements. Automated checks (axe-core) catch ~60% of issues; the rest requires real assistive technology testing. Owning focus management at the shell level prevents the hardest category of cross-MFE bugs.