Demystifying Accessibility in React Apps

on YouTube ↗26m

" summary

Covers how browsers build an accessibility tree, when to use native HTML versus ARIA, and how a demo form is implemented to announce errors and success reliably to screen readers (VoiceOver, NVDA, JAWS, TalkBack). Shows a reusable visually hidden component (polymorphic via an as prop), using React’s useId hook, aria-describedby/aria-invalid/aria-hidden, and role=status/alert for aria-live behavior. Demonstrates :focus-visible and the :has selector for keyboard-friendly hover actions, warns that research finds pages using ARIA often have more accessibility errors.

AI-written summary · about

" chapters (8)

1. 0:00Introduction to accessibility
2. 1:25Foundations of web accessibility
3. 4:17ARIA and semantic HTML
4. 6:25Icon buttons and focus management
5. 12:23Accessible text inputs
6. 20:34Validation and error handling
7. 23:03Accessible notifications
8. 24:29Testing with screen readers

" related talks

• 16mDemystifying accessibility in React appsKateryna Porshnieva · React Conf 2024
• 41mDemystifying Accessibility in React AppsKateryna Porshnieva · React Paris 2025
• 28mBuilding Accessible React ComponentsManjula Dube · React Summit Remote Edition 2021
• 36mAccessibility in React ApplicationJulia Undeutsch · reactjsday 2024
• 34mBuilding Accessible Web Apps in ReactShruti Kapoor · React Day by Frontend Nation 2025
• 31mHow to Be an A11Y - Creating Accessible React AppsNeha Nivedita · JSConf US 2018
• 34mBuilding Accessible Components in ReactJemima Abu · Build Stuff 2020
• 25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJSVishnu Ramineni · Commit Your Code 2025