Make your React Native apps accessible 🙌

Transcript

1. React Amsterdam @kulkarniankita9 MAKE YOUR REACT NATIVE APP ACCESSIBLE By Ankita Kulkarni Solutions Architect, Rangle.io
2. React Amsterdam @kulkarniankita9 What is Accessibility?
3. React Amsterdam @kulkarniankita9 What is Accessibility for mobile ?
4. React Amsterdam @kulkarniankita9 We need to make this Native world a more inclusive place for everyone
5. React Amsterdam @kulkarniankita9
6. React Amsterdam @kulkarniankita9 Design a seamless user experience for EVERYONE
7. React Amsterdam @kulkarniankita9 Reality check ✅
8. React Amsterdam @kulkarniankita9 Don't care about the Number$
9. React Amsterdam @kulkarniankita9 Universal design
10. React Amsterdam @kulkarniankita9 The Curb Cut Effect
11. React Amsterdam @kulkarniankita9 Accessibility is always an after thought but it shouldn't be
12. Voice over
13. React Amsterdam @kulkarniankita9 Let's see how we can add accessibility to our apps
14. React Amsterdam @kulkarniankita9 Be mindful of colours
15. React Amsterdam @kulkarniankita9 https://colorable.jxnblk.com/
16. React Amsterdam @kulkarniankita9
17. React Amsterdam @kulkarniankita9 And use Storybook to communicate ...
18. React Amsterdam @kulkarniankita9 Keep animations minimal
19. You get font scaling for free from React Native
20. React Amsterdam @kulkarniankita9 <Text /> individually vs. grouped
21. React Amsterdam @kulkarniankita9 Keep making incremental changes ➕
22. React Native Accessibility accessibilityLabel: Overrides the text that's read by the screen reader accessibility=true: It will read everything inside it at once but no touchables please accessibilityTraits : Type of element i.e header, image accessibilityComponentType : Type of selected element for example, radio button, checkbox Docs!!!
23. React Amsterdam @kulkarniankita9 ✨ Demo ✨
24. React Amsterdam @kulkarniankita9 Say Hi to Emma
25. React Amsterdam @kulkarniankita9 Before accessibility
26. React Amsterdam @kulkarniankita9 After accessibility
27. Onboarding experience 1. <AppIntroSlider 2. renderItem={this._renderItem} 3. slides={slides} 4. onDone={this._onDone} 5. buttonTextStyle={styles.buttonTextStyle} 6. activeDotStyle={styles.activeDotStyle} 7. showPrevButton 8. renderDoneButton={this._renderDoneButton} 9. renderNextButton={this._renderNextButton} 10. renderPrevButton={this._renderPrevButton} 11. /> 12
28. Slides object
29. _renderItem handler
30. Handlers passed (Next button) 1. _renderNextButton = () => { 2. return ( 3. <View style={styles.buttonCircle}> 4. <Ionicons 5. name="md-arrow-forward" 6. accessibilityRole={"button"} 7. accessibilityLabel={"Next"} 8. color="rgba(255, 255, 255)" 9. size={32} 10. /> 11. </View> 12. ); 13 }
31. Login Form
32. React Amsterdam @kulkarniankita9 Lessons learned Pick a flexible 3rd party library Be careful with accessible = true Getting user's attention to errors
33. React Amsterdam @kulkarniankita9 Accessibility testing tools
34. React Amsterdam @kulkarniankita9 Accessibility scanner for or inspector for
35. React Amsterdam @kulkarniankita9 Lastly, improve your development process
36. React Amsterdam @kulkarniankita9 Use a linter ttps://github.com/FormidableLabs/eslint plugin-react-native-a11y
37. React Amsterdam @kulkarniankita9 Design for everyone regardless of culture, language, life stage, ability or device. Accessibility is a priority, not an afterthought.
38. React Amsterdam @kulkarniankita9 Thank you @kulkarniankita9