Reusable Widgets That Work!

on YouTube ↗42m

" summary

Concrete, working patterns for accessible widgets: reusable Vue.js (and Svelte) components that implement focus traps and role="dialog" aria-modal="true" for modals, focus guards and tabindex="-1" to restore focus, and aria-pressed/aria-expanded/aria-controls for toggle buttons, accordions and tabs. Demos use GitHub-hosted code, Chrome Accessibility pane to inspect computed names, and VoiceOver to show AT/browser differences — toggles and dialogs change ARIA states live and the examples demonstrate looping focus and reliable keyboard behavior.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 1:23The freshest software
3. 5:55Framework
4. 6:12Continuous Development
5. 24:36Modal Example
6. 30:34Toggle Button Examples
7. 33:26Accordions Keyboard Interaction

" related talks

• 24mReusable Widgets that Work!Maria Lamardo · VueConf US 2024
• 22mAccessible JavaScript patternsGarance Flore Vallat · JSCamp Barcelona 2019
• 52mInclusive design challenges with UI widgetsPrem Nawaz Khan · Meta Refresh 2013
• 26mAccessibleJSJemima Abu · GOTOpia Chicago 2021
• 40mBuilding Accessible Reusable ComponentsSiddharth Kshetrapal · JSHeroes 2024
• 30mAccessible.JSJemima Abu · CityJS Conference 2020
• 49mHow to create accessible JavaScript widgets with basic HTML componentsJoshua Muheim · HelloA11Y Global Accessibility Awareness Day 2021
• 24mAccessible Javascript patternsGarance Flore Vallat · WebCamp Zagreb 2019