Building Accessible Reusable Components

on YouTube ↗40m

" summary

Semantic tags alone prove insufficient; the team builds a tab widget, a listbox with filtering, and a notification dialog inside the open‑source Primer design system using React bindings and a useFocusZone hook. VoiceOver on macOS highlights problems (three tabs initially read as many buttons, a 44‑item list was hard to traverse) so ARIA fixes — aria-selected, aria-describedby, live status regions and aria‑disabled plus keyboard arrow handling — get added and make the components announce counts (13 results, 0 results) and navigate reliably.

AI-written summary · about

" chapters (14)

1. 0:00Accessible components intro
2. 2:29WCAG ARIA and APG guidelines
3. 4:14Semantic HTML limitations
4. 7:42Screen reader tab demo
5. 13:05ARIA tabs and keyboard nav
6. 18:00Fixing tab with ARIA focus
7. 19:25Testing notifications screen reader
8. 22:36Hidden form options accessibility
9. 26:55Checkbox labels with ARIA status
10. 29:44Checkboxes fail keyboard users
11. 30:48List box replaces checkboxes
12. 33:33List box filter and results
13. 37:02Empty states and status
14. 38:24Final takeaways resources

" related talks

• 34mBuilding Accessible Components in ReactJemima Abu · Build Stuff 2020
• 52mA11y with React ComponentsRussell Skaggs · JavaScript and Friends Conference 2020
• 28mBuilding Accessible React ComponentsManjula Dube · React Summit Remote Edition 2021
• 23mBuilding Accessible Components: Best Practices and Business Buy-InWayne Jones · Commit Your Code 2025
• 34mBuilding Accessible Web Apps in ReactShruti Kapoor · React Day by Frontend Nation 2025
• 50mAccessibility-flavored React components...Kathleen Mcmahon · Inclusive Design 24 (#id24) 2018
• 40mAccessibility-flavored React components make your design system deliciousKathleen Mcmahon · reactjsday 2019
• 42mReusable Widgets That Work!Maria Lamardo · JSWorld Conference 2022