Accessibility in Single Page Applications
summary
Shows concrete fixes: update the browser title on route change (Angular/React examples) and set document title on route change; restore focus by giving the H1 tabindex="-1" then focus H1 after view swaps; replace clickable divs with real links or buttons and add context with visually hidden text; use ARIA like aria-live="polite" aria-atomic="true" for status updates; run Axe and headless checks via Axe/protractor/PhantomJS while remembering Carl Groves’ ~18% WCAG auto-testable limit.
AI-written summary · about
chapters (12)
- 0:00Start
- 2:12What we'll cover
- 2:30Good Design
- 6:02Document structure: Page titles
- 7:02Focus management
- 8:13Keyboard accessibility
- 9:27Links vs Buttons
- 11:40Visually hidden text
- 12:33ARIA
- 14:43Build tools
- 15:43Remember!
- 16:32References and sources
related talks
23mAccessible navigation in single-page applications
28mMaking Single Page Apps accessible
35m"Single Page Access"
52mMaking Single Page Apps Accessible: It's easier than you think
23mPractical A11Y for Web Apps
01h 00mBuild more accessible apps in Angular
48mRadically Accessible Internet Applications 💯
29mAngularJS Accessibility