Content Loading That Isn't Broken
summary
Shows a Vue single-page app (a 16-card memory game) and makes concrete fixes: update document title and route metadata, add an aria-live polite region (role=status) for route announcements, move focus to main with a tabindex of -1 and a small Vue directive, and use aria-labelledby/aria-describedby and aria-current on links. Demonstrates cross-browser screen reader differences (VoiceOver+Safari works, Chrome less so) and ends with a working win announcement (game wins reported with three stars left).
AI-written summary · about
chapters (6)
- 0:00Start
- 0:49Color blindness simulator
- 2:10Single Page Applications
- 9:48Screen Readers and Browsers
- 11:57Tabindex
- 17:04Accessible Name
related talks
23mVue Announcer - Content Loading That Isn't Broken
17mAccessibility in Single Page Applications
23mAccessible navigation in single-page applications
28mMaking Single Page Apps accessible
52mResearching and Writing Accessible Vue ... Thingies
35m"Single Page Access"
46mA11Y with Vue - Can everyone reach your application?
31mAccessibility with Vue