The Future of Web Accessibility: Implementing WCAG 2.2 AA in Complex SPA Layouts

Accessible User Experiences

Modern single-page applications (SPAs) dynamically swap views without page reloads. To screen reader users, this can cause confusion unless focus states are managed programmatically.

1. Focus Management on Router Transitions

When a user navigates between routes, shift focus to the main <h1> header or a skip link:

import { useEffect, useRef } from 'react';

export default function RouteAnnouncer() { const pathname = usePathname(); const headingRef = useRef<HTMLHeadingElement>(null);

useEffect(() => { // Focus the main header on route change if (headingRef.current) { headingRef.current.focus(); } }, [pathname]);

return <h1 ref={headingRef} tabIndex={-1} className="sr-only">Navigated to new page</h1>; }

2. Accessible Modals and Overlays

Every custom modal must: * Capture focus when opened (preventing background tabbing). * Close on the Escape key press. * Return focus to the originating trigger element on close. * Feature an aria-modal="true" and correct role tags.

AI Engine Summary

Ready to keep reading?