Recipe for an Accessible Component
summary
Builds an accessible accordion live in CodeSandbox, runs Chrome Lighthouse to find a failing contrast ratio then raises it to contrast 5.74 so it passes WCAG, swaps a div for a semantic button and adds aria-expanded aria-controls and aria-labelledby plus role=region, implements keyboard behavior with a parent-managed focused index and refs so up/down arrow navigation loops and Escape collapses, and demonstrates the component working end to end without external libraries.
AI-written summary · about
chapters (5)
related talks
35mAccelerating accessibility in web
25mAccessibility in the Age of Components
23mBuilding Accessible Components: Best Practices and Business Buy-In
28mBuilding Accessible React Components
12mReact Accessibility: Beyond the Basics
34mBuilding Accessible Web Apps in React
26mAccessibleJS
34mBuilding Accessible Components in React