Accessibility with Svelte - Beyond Compiler Warnings
summary
Svelte ships accessibility warnings but compiler checks stop short of dynamic and runtime problems, so the talk demonstrates concrete fixes: convert divs to landmarks and headings to restore the accessibility tree, add aria-live and role=status so form feedback is announced, bind keyboard events for custom controls, and honor prefers-reduced-motion media query to stop animations. Live demos use the browser Accessibility pane, voiceover rotor, and emulators plus axe DevTools and Lighthouse to prove issues and validate fixes.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 2:29Why accessibility matters
- 6:18Accessibility in Svelte
- 8:41Semantic HTML structure
- 13:17Keyboard navigation
- 17:18Forms and screen readers
- 21:24Device settings and UI
- 24:54Testing tools and conclusion
related talks
26mAccessibility Is a Marathon, not a Sprint
26mDemystifying Accessibility in React Apps
12mReact Accessibility: Beyond the Basics
22mBetter accessibility with a user-centric view
33mMarkup matters
22mFrom a Workshop to a Wake-Up Call: My Journey into Accessibility
30mAccessible.JS
36mAccessibility in React Application