Creating Accessible React Native Apps

Can React Native apps be made accessible for people with disabilities? Let’s find out!

Photo by Matthew Henry from Burst

Back in January 2020, Shopify publicly announced its adoption of React Native. This meant from that point forward, all of our new mobile apps would be built with the React Native framework. By extension, this also meant a new learning opportunity for our accessibility team, in testing apps and guiding design and development teams to create accessible user experiences.

Fast forward a few months later, when a handful of talented volunteers from Shopify would start working on a new React Native app called COVID Shield: a COVID-19 exposure notification solution. While the team was working on COVID Shield, I was brought on to conduct accessibility testing as development was taking place.

This post includes details on how I tested COVID Shield for accessibility, closely reviewing a few key issues, and the related solutions to those issues. Hopefully, this advice will help you test your own apps to ensure you’re creating an accessible experience for all your users.

Before we dive into those details, it’s worth noting COVID Shield was adopted by the Canadian federal government to provide Canadian citizens a notification method for potential exposure to COVID-19. The app was rebranded as COVID Alert. Future development was taken over by the Canadian Digital Services team. Now, let’s jump in.

Test environment

Since the COVID Shield app was in active development, my testing environment included a few tools other than real-world, physical devices:

• iOS simulator paired with macOS Accessibility Inspector
• iOS simulator paired with macOS VoiceOver
• Android emulator paired with TalkBack screen reader
• Physical Android device with a snapshot of the COVID Shield apk installed

For a full understanding of how to use these tools to test app accessibility, you can read my post Mobile Screen Reader Testing.

React Native Accessibility API