Patterns for Making Accessible Components
summary
Practical, code-level patterns for accessible components: use aria-current for breadcrumbs so screen readers know the active page; implement toasts as role="status" live regions and hide the visual dismiss button from the accessibility tree to avoid noisy reads; build tabs with IDs, panels using tabindex="-1" with arrow-key navigation plus aria-selected/aria-hidden toggles; test with Lighthouse, manual screen‑reader checks, and the surprising trick of disabling CSS to reveal reading order.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 1:56Accessibility-first design
- 3:00Accessible component techniques
- 5:10Accessible breadcrumbs
- 7:13Accessible toast notifications
- 9:41Building accessible tab components
- 12:56Keyboard navigation in tabs
- 13:38Testing accessibility
related talks
47mBuilding Accessible Web Components
35mAccelerating accessibility in web
22mAccessible Components with Homer Gaines
23mBuilding Accessible Components: Best Practices and Business Buy-In
01h 12mPractical Tips for Building More Accessible Front-Ends by Sara Soueidan
28mDeveloper's Guide to Accessibility Mechanics
28mBuilding Accessible React Components
52mCommon Accessibility Pitfalls