A11y with React Components

on YouTube ↗52m

" summary

Covers three concrete problems and fixes: avoid non-semantic markup by spreading unknown props and letting a heading component accept an elm prop; render buttons as anchors when href exists; and fix SPA titles and focus with useEffect/useRef so document.title updates and a container gets programmatic focus (tabindex=-1 to enable programmatic focus). For complex widgets like tabs, implement WAI-ARIA roles, set aria-selected/aria-controls and tabindex 0/-1, and wire arrow-key behavior (useReducer for sequential state). Notes Axe flags only ~50% of issues.

AI-written summary · about

" chapters (10)

1. 0:00Start
2. 0:16Russell Skaggs
3. 3:05Types of Front-End Developers
4. 6:48Non-Semantic or Broken Markup
5. 9:53Concerns of the Component
6. 16:45Buttons
7. 24:41Tabs
8. 38:12Reducer Pattern
9. 46:45The Page Title
10. 50:54Key Takeaways

" related talks

• 34mBuilding Accessible Components in ReactJemima Abu · Build Stuff 2020
• 49mSupporting accessibility in React: the difficulties and nicetiesDiane Koh · axe-con 2023
• 08mA11Y and ReactNicholas Pringle · JSNation 2019
• 39mBuilding Webapps for everyone - a11y with ReactManjula Dube · React Day Berlin 2019
• 31mHow to Be an A11Y - Creating Accessible React AppsNeha Nivedita · JSConf US 2018
• 50mTips, tricks and tools for building accessible React web appsAlmero Steyn · Inclusive Design 24 (#id24) 2017
• 41mDemystifying Accessibility in React AppsKateryna Porshnieva · React Paris 2025
• 40mAccessibility-flavored React components make your design system deliciousKathleen Mcmahon · reactjsday 2019