Demystifying Accessibility in React Apps

on YouTube ↗41m

" summary

Practical guide to accessibility in React that gives concrete patterns not platitudes: prioritise use native HTML first, use ARIA only where needed, and implement working examples — icon buttons with aria-hidden or visually-hidden labels, focus management with :focus-visible and :has plus hover media queries, labeled inputs wired by id/useId and aria-describedby for hints and errors, live notifications via aria-live / role="alert", and automated checks with axe DevTools, Lighthouse, jsx-a11y and testing-library that actually surface regressions.

AI-written summary · about

" chapters (16)

1. 0:00Q&A session
2. 2:36Introduction to accessibility
3. 4:22Accessibility foundations
4. 6:19Understanding ARIA
5. 10:09ARIA best practices
6. 12:38Accessible icon buttons
7. 15:46Focus management
8. 19:52Accessible form inputs
9. 22:54Describing input elements
10. 25:17Validation and error states
11. 28:26Syncing visual and semantic cues
12. 30:27ARIA live regions
13. 34:14Accessible form demo
14. 35:16Automated testing tools
15. 36:54Semantic testing strategies
16. 38:23Inclusive design and conclusion

" related talks

• 16mDemystifying accessibility in React appsKateryna Porshnieva · React Conf 2024
• 26mDemystifying Accessibility in React AppsKateryna Porshnieva · React Brussels 2024
• 36mAccessibility in React ApplicationJulia Undeutsch · reactjsday 2024
• 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
• 34mBuilding Accessible Web Apps in ReactShruti Kapoor · React Day by Frontend Nation 2025
• 34mBuilding Accessible Components in ReactJemima Abu · Build Stuff 2020
• 23m12 Tips For More Accessible React AppsManuel Matuzović · React Finland 2019