Design Systems are a Carnival! One Accessible Component, Many Pretty Masks
summary
Claims that a single disclosure widget can be a reusable accessible base are supported with concrete patterns: useState/useRef/useEffect for state and focus management, aria-controls/aria-expanded/aria-label for screen readers, Escape to return focus, and Font Awesome SVG icons gated behind props. Cites the WebAIM trend (ARIA up ~29% in one year, nearly quadrupled since 2019). Warns that mixing patterns into mega components breaks roles and accessibility; Open UI work is cited as a coming fix.
AI-written summary · about
chapters (13)
- 0:00Welcome
- 1:21About the speaker
- 3:34Design systems metaphor
- 5:21Accessibility challenges
- 7:51Accessible disclosure widget
- 12:50Focus management
- 14:59Toggle tips pattern
- 17:26Icon-only buttons
- 18:11Toggle search focus
- 20:40Component pattern dangers
- 25:53Mega menus confusion
- 27:18Unwise design risks
- 28:51Future solutions
related talks
45mDesign System Carnival! One accessible component, many pretty masks
40mAccessibility-flavored React components make your design system delicious
50mAccessibility-flavored React components...
38mDesign Systems Mastery: From Patterns & Principles to Product Excellence
10mDesign Systems Showcase: Designing Performance Friendly & Accessible Foundations
59mImproving Accessibility Through Design Systems
25mAccessibility in the Age of Components
47mFrom Parts to Whole – Beyond Design System