A majority of internet activity today happens on mobile devices. We use mobile apps for a range of needs including healthcare, commerce, entertainment, banking, and education. They are a fundamental part of everyday life.
Supporting accessibility in a mobile app for people with disabilities or special needs grants them the ability to enjoy the same conveniences as everyone else. Accessibility is a key consideration when designing services and products, but with no formal legislation around accessibility requirements, it could be easy to ignore impacted communities when designing and building apps.
The Americans with Disabilities Act (ADA) applies to any mobile app and organization. Just like web apps, mobile applications should follow Web Content Accessibility Guidelines (WCAG). In this post, let's discuss how you can build an ADA-compliant mobile app with Crowdbotics App Builder.
The WCAG does not detail specific architectural requirements for mobile apps. However, when building a mobile application, there are two major ways to ensure that you are positioned to properly implement accessible design:
Building a mobile app with these two considerations will ensure that accessibility remains a core function of the app.
To support accessibility in your mobile application, you should consider the following guidelines during development.
1pt = 1.33px.
The essential steps you can take as an app developer when building an ADA-compliant mobile app is to enable the screen reader on a user's device and use complementary APIs to support accessibility for both iOS and Android platforms. In this section, we are going to cover an example when adding a particular module in your app with the Crowdbotics App Builder.
Before we proceed, please make sure to have an account registered with the Crowdbotics App Builder and have access to the dashboard and other screens such as Storyboard. If necessary, brush up on how to Scaffold a new Custom Mobile App with Crowdbotics and create a new demo app with the App Builder.
Once the scaffolding process is done, you are going to be welcomed by the Storyboard screen. This editing tool provides a logical flow to maintain a collection of your app's screens.
The module we are going to cover and test for accessibility is called Email Auth. It's an app screen that contains a login form with input fields and a touchable button.
At the Storyboard screen, from the right panel, select Modules and then add the Email Auth module to the Storyboard via drag-and-drop. Click the save button.
The initial step to test out accessibility in a mobile app is to enable the accessibility feature from a device's settings. Do note that when an app is in development and you are testing for accessibility features, you will have to run the app on a physical device. In both iOS and Android simulators, the screen reader functionality is not available.
To access Accessibility on iOS, please visit
Settings > Accessibility > VoiceOver. This enables the screen reading functionality on a physical device. Similarly, to enable the screen reading functionality on an Android device, please visit
Settings > Accessibility > Talkback. On enabling this feature for the first time, Android as a platform introduces its features through a tutorial.
Now, you can access the
Accessibility in the file
src/features/EmailAuth/screens/SignIn/index.js. You can add use the different elements from the Accessibility API to add to a specific component in your app. For example, the below demo uses it on the login button component. Building apps with React Native, it is important to note that by default all touchable elements are accessible. The value of the
accessibilityHint from below reads out to the user.
accessibilityHint='Navigates to the home screen'
Testing it on the application might look as below:
This method is an example of how you can build a mobile app and take the necessary steps such that the app complies with ADA. You can add and test more accessibility features in your app, but that completely depends on the design of the app screens, which will differ for each app.
After reading this post, you know how to enable accessibility features in mobile applications that are built with Crowdbotics App Builder and what the main requirements are to build an ADA-compliant mobile app. ADA compliance is made possible via Crowdbotics' full-code approach to build mobile apps, in which users have total control over the way their data is processed in their Crowdbotics app.
An app generated with the Crowdbotics App Builder tool comes with default permissions, specifically the ones we have discussed in the previous section. To build an app, Crowdbotics offers both the low-code Crowdbotics App Builder and managed app development by expert PMs and engineers.
November 18, 2020