Make your React Native apps accessible
summary
Shows a before/after VoiceOver demo of an onboarding screen and login form built with react-native-app-intro-slider and react-native-paper, then adds accessibilityLabel, accessibilityRole/traits, accessibilityHint and uses announceForAccessibility to surface errors. Demonstrates contrast checks with Stark/colorable, inspects elements with Accessibility Inspector, and enforces rules with eslint-plugin-react-native-a11y. Recommends incremental changes, common components with accessibility props, and testing on Expo/React Native using react-native-app-intro-slider and announceForAccessibility to make mobile apps usable.
AI-written summary · about
chapters (16)
- 0:00Start
- 1:53Accessibility
- 2:25What Is Accessibility for Mobile
- 5:43Universal Design
- 5:58Curb Cut Effect
- 10:06Colors
- 11:52Designers Palettes into Common Components
- 12:52Storybook
- 13:40Keep Animations Minimal
- 14:29Font Scaling
- 16:36Accessibility Label
- 18:08Accessibility Traits Property
- 18:35Demo
- 25:03Login Form
- 26:57Lessons I Learned
- 27:29Tools for Testing
related talks
20mBuilding apps for everyone - Accessibility with React Native
26mBe a React Native A11
32mReact native and accessibility
09mIncorporating screen readers into React Native development for improved accessibility
26mDemystifying Accessibility in React Apps
41mDemystifying Accessibility in React Apps
23mAccessibility as a First Class Citizen
22mAccessibillity in Motion