Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Make your React Native apps accessible πŸ™Œ

Ba0adbbfa699d09f6ee7b4402e4dcf9f?s=47 Ankita Kulkarni
April 12, 2019

Make your React Native apps accessibleΒ πŸ™Œ


Ankita Kulkarni

April 12, 2019


  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