”Garbage Pail Components”
summary
Live demos expose concrete component anti‑patterns: menus built with divs all the way down that break keyboard and screen‑reader access, modals that fail to disable background controls, focus traps that prevent tabbing out, and an auto‑playing carousel that produces an additive label carousel (VoiceOver repeats all prior image labels). Recommendations are specific: test with screen readers, follow the ARIA Authoring Practices Guide, add keyboard/unit tests, use Gatsby accessibility docs, and run user testing with Fable or Knowbility.
AI-written summary · about
chapters (10)
- 0:00Intro
- 1:52Accessibility
- 3:57Compassion for our users
- 8:43I feel excluded and invisible
- 11:24Garbage pail components
- 15:18Focus traps
- 17:47Carousel
- 21:28Label Carousel
- 29:55Carousel Image
- 30:06Wrap Up
related talks
15mPatterns for Making Accessible Components
40mBuilding Accessible Reusable Components
23mBuilding Accessible Components: Best Practices and Business Buy-In
22mAccessible Components with Homer Gaines
47mBuilding Accessible Web Components
41mTales of Accessibility Failures
52mCommon Accessibility Pitfalls
40mAccessibility-flavored React components make your design system delicious