Reusable Widgets that Work!
summary
Live demos show working toggle buttons (Chrome Accessibility pane reports pressed true/false), a modal with role=dialog, aria-modal="true" and focus trapped so Escape closes and background is inert, accordions with headings + button using aria-controls and toggling aria-expanded, and a tablist that moves with arrow keys move tabs while inactive tabs use tabindex="-1". WAI‑ARIA patterns and WCAG are cited and a WebAIM stat (34.2% more detected errors when ARIA is misused) is highlighted; a screen‑reader audio glitch occurs but ARIA announcements are visible.
AI-written summary · about
chapters (5)
related talks
42mReusable Widgets That Work!
26mAccessibleJS
27mMaking Interactions Accessible to All Users
28mDeveloper's Guide to Accessibility Mechanics
52mInclusive design challenges with UI widgets
30mAccessible.JS
47mBuilding Accessible Web Components
49mHow to create accessible JavaScript widgets with basic HTML components