Introducing ACRN: An Accessibility Component Library for React Native

Implement Accessibility-first components for your mobile application with ease

Imagine waking up and checking your phone for all the latest notifications from your favorite apps. Within seconds and a few simple taps on your device, you are messaging your loved ones on WhatsApp and browsing funny dog videos on TikTok. For the majority of us, this is a regular occurrence and can be done amidst the morning haze and silencing of our alarm clocks. But for those with disabilities, interacting with a phone can be a monumental effort.

Tools including screen readers are a necessary part of life for individuals with disabilities like blindness or low vision. While there are many great organizations like W3 (World Wide Web Consortium) who have published useful documentation for accessibility like the WCAG (Web Content Accessibility Guidelines), there is still a lot of work to be done to make interacting with our phones inclusive.

Given that over 50% of internet traffic is done through a mobile device, and that the average person can spend anywhere from 3–6 hours on their phone daily, accessibility needs to evolve to be mobile first.

With this in mind, we set out to develop a tool for engineers to easily create standardized user experiences like Logins, Navigation Bars, and Account Creation where all the effort to add accessibility is handled for you.

Introducing ACRN (Accessibility Components for React Native), a npm component library that can be installed and implemented into any project to make accessibility accessible for engineers. We created these components to have default features that handle many concerns for individuals who require screen-readers or who experience color blindness. Additionally, these components are modular enough to handle different styling or form validation that suits any application you may be building.

The library is lean to start, but has all the structure to serve as a base to build more accessibility-first components in the future. The project has a built in Storybook application to host and develop new components. We are excited to receive feedback from the community and have documentation on how to install and contribute to this project on our GitHub and NPM page. Please reach out if you have any ideas to implement in our library, keeping accessibility and inclusiveness as a priority!

Contact

Mathias Perfumo: LinkedIn | GitHub

Michael Jung: LinkedIn | GitHub

Alex Leibler: LinkedIn | GitHub

David Sharfi: LinkedIn | GitHub