Accessible navigation in single-page applications
summary
Shows concrete fixes: update the tab title and update document.title and use React Helmet so pages announce, push SPA views into browser history with react-router, and programmatically move focus to the H1 with tabindex -1 on page changes. Warns against hacks like hidden live regions that compete with focus, and recommends ARIA notifications such as use role=alert or role=status for non‑focus announcements. Provides code snippets and a small demo that actually implements these patterns.
AI-written summary · about
chapters (11)
- 0:00Accessible SPA navigation
- 2:23SPAs break screen reader nav
- 4:14Key aspects of SPA nav
- 4:36Page titles for context
- 8:52Focus management on change
- 12:27Focus for dynamic elements
- 16:27Notify users without focus shift
- 17:34Semantic markup for pages
- 18:39History management in SPAs
- 20:46Built-in accessibility tips
- 21:27Q&A
related talks
17mAccessibility in Single Page Applications
28mMaking Single Page Apps accessible
35m"Single Page Access"
52mA11y with React Components
52mMaking Single Page Apps Accessible: It's easier than you think
23m12 Tips For More Accessible React Apps
22mAccessible JavaScript patterns
26mDemystifying Accessibility in React Apps