Single Page Application (SPA) Accessibility Checklist

SPA Accessibility Audit

Single Page Applications (SPAs) built with React, Vue, Angular, and similar frameworks introduce accessibility challenges that traditional server-rendered pages do not have. Client-side routing, dynamic DOM updates, and component-based architecture require specific attention.

SPA-Specific Accessibility Issues

Client-Side Routing

• Page navigation does not trigger browser's native page load announcement
• Users must be informed that content has changed
• Focus must be managed when navigating between "pages"
• Browser history (back button) must work correctly

Dynamic Content Updates

• Content added or removed from the DOM after initial load
• AJAX responses that modify page content
• Real-time notifications and alerts
• Loading states and progress indicators

Routing Accessibility Checklist

1. Announce route changes — Use an aria-live region or move focus to announce navigation
2. Update page title — Document title should change with each route
3. Manage focus — Move focus to the new content area (h1 or main) after navigation
4. Update URL — Ensure the URL reflects the current view for bookmarking and sharing
5. Handle back button — Browser back should navigate to previous view with correct focus

Framework-Specific Considerations

React

• Use React Helmet for dynamic page titles
• Use useRef + focus() for focus management after route changes
• Use React portals for modals to maintain DOM order
• Use aria-live regions for state change announcements

Vue

• Use vue-router's afterEach hook for focus management
• Use Vue's <Teleport> for modals
• Use v-if carefully — removed elements lose focus

Angular

• Use Angular's Title service for dynamic titles
• Use @angular/cdk for accessible overlays and focus trap
• Use LiveAnnouncer service for screen reader announcements

Dynamic Content Checklist

• Loading spinners have accessible labels (aria-label="Loading")
• Skeleton screens are announced or hidden from screen readers
• Success/error messages use aria-live="polite" or role="alert"
• Infinite scroll has a keyboard-accessible "Load more" alternative
• Virtual/windowed lists maintain accessibility tree correctly