Micro-Frontend Accessibility: Focus Coordination, Shared Live Regions & ARIA Namespaces

Micro-frontends allow large enterprise teams to develop and deploy web applications independently using tools like Webpack Module Federation, Single-SPA, or iframe portals. However, when multiple independent codebases assemble into a single DOM, critical accessibility mechanisms (focus management, ARIA live regions, and unique element IDs) frequently collide and break.

The Accessibility Challenges of Micro-Frontend Architecture

• Duplicate DOM IDs (WCAG 4.1.2): Independent teams reusing generic IDs (`id="header"`, `id="main-nav"`) cause screen reader form bindings to fail.
• Lost Focus on Route Changes: When a sub-app updates dynamically, focus remains stranded in the shell without notifying the user.
• Conflicting ARIA Live Regions: Multiple competing live regions interrupt each other, causing missed announcements.

Coordinating Cross-App Focus and Routing Transitions

Implement a lightweight Event Bus in the container shell. When a sub-app triggers a route transition, emit a custom navigation event so the container shell can reset focus to the new sub-app's primary `<h1>`:

// Shell Container Event Coordinator
window.addEventListener('microapp:navigated', (e) => {
  const { targetHeadingId } = e.detail;
  const heading = document.getElementById(targetHeadingId);
  if (heading) {
    heading.setAttribute('tabindex', '-1');
    heading.focus();
  }
});

Centralized ARIA Live Region Bus

Instead of allowing each micro-app to mount its own live region, host a single shared live region in the container shell and expose a broadcast function to all child apps.

Preventing DOM ID Collisions

Require all micro-frontends to namespace their DOM IDs and ARIA attributes (e.g. `id="cart-app--checkout-btn"` instead of `id="checkout-btn"`).