Tweet
Tweet

Slide 1

Slide 1 text

React Amsterdam @kulkarniankita9 MAKE YOUR REACT NATIVE APP ACCESSIBLE By Ankita Kulkarni Solutions Architect, Rangle.io

Slide 2

Slide 2 text

React Amsterdam @kulkarniankita9 What is Accessibility?

Slide 3

Slide 3 text

React Amsterdam @kulkarniankita9 What is Accessibility for mobile ?

Slide 4

Slide 4 text

React Amsterdam @kulkarniankita9 We need to make this Native world a more inclusive place for everyone

Slide 5

Slide 5 text

React Amsterdam @kulkarniankita9

Slide 6

Slide 6 text

React Amsterdam @kulkarniankita9 Design a seamless user experience for EVERYONE

Slide 7

Slide 7 text

React Amsterdam @kulkarniankita9 Reality check ✅

Slide 8

Slide 8 text

React Amsterdam @kulkarniankita9 Don't care about the Number$

Slide 9

Slide 9 text

React Amsterdam @kulkarniankita9 Universal design

Slide 10

Slide 10 text

React Amsterdam @kulkarniankita9 The Curb Cut Effect

Slide 11

Slide 11 text

React Amsterdam @kulkarniankita9 Accessibility is always an after thought but it shouldn't be

Slide 12

Slide 12 text

Voice over

Slide 13

Slide 13 text

React Amsterdam @kulkarniankita9 Let's see how we can add accessibility to our apps

Slide 14

Slide 14 text

React Amsterdam @kulkarniankita9 Be mindful of colours

Slide 15

Slide 15 text

React Amsterdam @kulkarniankita9 https://colorable.jxnblk.com/

Slide 16

Slide 16 text

React Amsterdam @kulkarniankita9

Slide 17

Slide 17 text

React Amsterdam @kulkarniankita9 And use Storybook to communicate ...

Slide 18

Slide 18 text

React Amsterdam @kulkarniankita9 Keep animations minimal

Slide 19

Slide 19 text

You get font scaling for free from React Native

Slide 20

Slide 20 text

React Amsterdam @kulkarniankita9 individually vs. grouped

Slide 21

Slide 21 text

React Amsterdam @kulkarniankita9 Keep making incremental changes âž•

Slide 22

Slide 22 text

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!!!

Slide 23

Slide 23 text

React Amsterdam @kulkarniankita9 ✨ Demo ✨

Slide 24

Slide 24 text

React Amsterdam @kulkarniankita9 Say Hi to Emma

Slide 25

Slide 25 text

React Amsterdam @kulkarniankita9 Before accessibility

Slide 26

Slide 26 text

React Amsterdam @kulkarniankita9 After accessibility

Slide 27

Slide 27 text

Onboarding experience 1. 12

Slide 28

Slide 28 text

Slides object

Slide 29

Slide 29 text

_renderItem handler

Slide 30

Slide 30 text

Handlers passed (Next button) 1. _renderNextButton = () => { 2. return ( 3. 4. 11. 12. ); 13 }

Slide 31

Slide 31 text

Login Form

Slide 32

Slide 32 text

React Amsterdam @kulkarniankita9 Lessons learned Pick a flexible 3rd party library Be careful with accessible = true Getting user's attention to errors

Slide 33

Slide 33 text

React Amsterdam @kulkarniankita9 Accessibility testing tools

Slide 34

Slide 34 text

React Amsterdam @kulkarniankita9 Accessibility scanner for or inspector for

Slide 35

Slide 35 text

React Amsterdam @kulkarniankita9 Lastly, improve your development process

Slide 36

Slide 36 text

React Amsterdam @kulkarniankita9 Use a linter ttps://github.com/FormidableLabs/eslint plugin-react-native-a11y

Slide 37

Slide 37 text

React Amsterdam @kulkarniankita9 Design for everyone regardless of culture, language, life stage, ability or device. Accessibility is a priority, not an afterthought.

Slide 38

Slide 38 text

React Amsterdam @kulkarniankita9 Thank you @kulkarniankita9