How to Be an A11Y - Creating Accessible React Apps
summary
Browses for concrete takeaways: 15% of the population has a disability and 8% is colorblind, so measureable impact drives the case. Examples show what breaks β e.g. don't make a button out of a div β and fixes that work: semantic HTML, aria attributes, focus management via refs, an aria-live announcer for dynamic updates, page titles with react-helmet, SVG title/desc, create-react-app starter, eslint-plugin-jsx-a11y and contrast check tools, plus unit tests for aria and focus.
AI-written summary Β· about
chapters (20)
- 0:00Start
- 4:21Web Accessibility
- 7:08A11y issues in JS Frameworks
- 8:44How does React work?
- 9:07React JSX
- 10:30Accessible React Apps
- 11:41document.title
- 11:54react-document-title
- 13:23Configurable headers
- 13:52Unique IDs
- 18:55Solution
- 21:09Problem
- 21:49Accessible SVG
- 22:58Contextual Info
- 24:35Color & Contrast
- 26:58What to test?
- 27:22Unit test example
- 27:52Libraries
- 28:18Starter app & modules
- 28:47Other tools
related talks
08mA11Y and React
41mDemystifying Accessibility in React Apps
36mAccessibility in React Application
34mBuilding Accessible Web Apps in React
25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJS
50mTips, tricks and tools for building accessible React web apps
26mDemystifying Accessibility in React Apps
39mBuilding Webapps for everyone - a11y with React