Making Single Page Apps Accessible: It's easier than you think
summary
Claim: JavaScript frameworks aren’t the barrier—missing specifics are. Use semantic HTML (real buttons, headings, linked labels) not “div soup”; generate unique IDs with uuid; add autocomplete attributes; update document.title on route changes and update document.title + focus the new H1 with tabindex="-1" to notify screen readers. Use the native <dialog> and dialog + inert to build accessible modals (works in modern browsers). Test with eslint-plugin-jsx-a11y, axe-core, WAVE, Lighthouse and manual keyboard and screen reader checks (JAWS, NVDA, VoiceOver, TalkBack); automated tools catch ~20–30% of issues.
AI-written summary · about
chapters (8)
- 0:00Accessible single page apps intro
- 4:44What accessibility means
- 12:26Accessible markup foundation
- 18:21Accessible forms
- 26:03Visible focus indicators
- 30:23Routing challenges in SPAs
- 41:41Accessibility testing tools
- 51:30Summary
related talks
28mMaking Single Page Apps accessible
17mAccessibility in Single Page Applications
23mPractical A11Y for Web Apps
01h 12mPractical Tips for Building More Accessible Front-Ends by Sara Soueidan
34mBuilding Accessible Web Apps in React
35m"Single Page Access"
36mAccessibility in React Application
30mAccessible.JS