Making Single Page Apps accessible
summary
Shows concrete fixes for SPA accessibility: use semantic HTML not div soup, link labels to inputs or hide them with an sr-only pattern, update document.title and manage focus on client-side routing with refs and tabindex=-1, prefer native buttons to div hacks, use fragments to avoid extra DOM nodes, and test with tooling like axe Lighthouse Accessibility Insights plus keyboard checks and VoiceOver or NVDA. Implementations and code patterns are described, not just theory.
AI-written summary · about
chapters (16)
- 0:00Intro
- 2:17Are JavaScript frameworks bad for accessibility?
- 3:01What is web accessibility?
- 3:41357,000 Australians have a visual impairment
- 3:581 in 6 Australians are affected by hearing loss
- 4:34Accessibility benefits everyone
- 7:11Semantic HTML
- 10:46Fragments for valid html
- 12:12Inputs & labels
- 15:13Page titles
- 16:38Visible focus styles
- 18:00Focus management
- 18:12SPA'S use silent routing
- 22:09Tooling & Testing
- 24:51Automated testing is just the first step
- 26:37Screenreader
related talks
17mAccessibility in Single Page Applications
52mMaking Single Page Apps Accessible: It's easier than you think
23mAccessible navigation in single-page applications
35m"Single Page Access"
23mPractical A11Y for Web Apps
01h 12mPractical Tips for Building More Accessible Front-Ends by Sara Soueidan
22mBetter accessibility with a user-centric view
01h 00mBuild more accessible apps in Angular