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

Make your React Native apps accessible πŸ™Œ

Ankita Kulkarni
April 12, 2019
160

Make your React Native apps accessibleΒ πŸ™Œ

Ankita Kulkarni

April 12, 2019
Tweet

Transcript

  1. React Amsterdam @kulkarniankita9 MAKE YOUR REACT NATIVE APP ACCESSIBLE By

    Ankita Kulkarni Solutions Architect, Rangle.io
  2. 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!!!
  3. 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
  4. 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 }
  5. React Amsterdam @kulkarniankita9 Lessons learned Pick a flexible 3rd party

    library Be careful with accessible = true Getting user's attention to errors
  6. React Amsterdam @kulkarniankita9 Design for everyone regardless of culture, language,

    life stage, ability or device. Accessibility is a priority, not an afterthought.