How to Make Your Crowdbotics App ADA-Compliant

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.

How to know if your application needs to be ADA compliant

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:

• Account for as many devices and edge cases as possible. Designing an entire mobile application around a single default font and display size is bad design. When applying accessibility features later on in the app, the font or the display size might be affected, which would lead to relocating interface elements on the screen. One or many screens could lose their overall composition, which might not make sense. Thus, when designing the application, considering these edge cases will often lead to more accessible implementation.
• During the development of the app, there is a misconception which states that accessibility is a cost in terms of focus and overall functionality. Due to this misconception, accessibility as functionality in a mobile app is often overlooked. Later on, this could lead to more refactoring and time-consuming efforts. To avoid it, considering accessibility to be another functionality of the app from the start could prove to be a better investment.

Building a mobile app with these two considerations will ensure that accessibility remains a core function of the app.

Supporting Accessibility in a Mobile App

To support accessibility in your mobile application, you should consider the following guidelines during development.

• When designing a mobile app according to the WCAG guidelines, the background and foreground color should contrast with each other. This helps the colors to be seen on monochrome screens as well as by people with limited color perception. Having color deficiencies can affect luminance contrast. The minimum contrast ratio should be 4:5:1.
• Text that is larger and has wider character strokes is easier to read at lower contrast. An 18pt (point text) or 14pt bold text is considered large enough to require a lower contrast ratio. Do note that the point size must be calculated based on font metrics. These are based on CSS px size, and the ratio between these sizes and CSS pixels is equivalent to 1pt = 1.33px.
• Choosing the right font matters. The right font could be based on the size and weight of a font type. Fonts with thin and light font weights should be avoided, since they reduce the size of the letters and make them hard to read at lower contrast levels.
• Specifying a background color is important. Background color is the specified color over which text is rendered. If no background color is specified, then sufficient contrast cannot be determined ,since it is not possible to know the default background color of the user's device. Similarly, it is equally important to specify text color for similar reasons.
• Keep the layout of an application consistent in terms of design and functionality such that it becomes easier to navigate. Instead of hiding elements on the app screen and only displaying them in case of triggering an event, try to implement the same behavior by disabling rather than hiding them. Place the elements with the most important functionalities, such as action buttons and those related to navigation, above other elements. You can make sure to place these elements in the same position regardless of the layout orientation (portrait or landscape) of the user's device.
• Another good practice is to divide the content of the app into several screens rather than tightly keeping all the content of the app on one screen. This makes it easier for screen readers to navigate between different screens when enabled.

How to implement ADA compliance using the Crowdbotics App Builder

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.

This screen module is now added to your RAD stack app. Mobile apps built with the Crowdbotics App Builder tool use a frontend framework called React Native. It's a JavaScript-based framework that allows the development of a mobile app for cross-platform devices such as iOS and Android. The framework itself contains an API to enable accessibility elements in the app. To use this API in your app, it requires some manual coding, so click over to your source code from within the Settings page.

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.

<Button
  style={styles.actionButon}
  onPress={this.submitLogin}
  accessible={true}
  accessibilityLabel='Login'
  accessibilityHint='Navigates to the home screen'
>
  LOGIN
</Button>

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.

Conclusion

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.

For further reading on ADA, check out this resource. To learn how to build mobile apps with Crowdbotics App Builder, please read our guide to building a custom mobile app with Crowdbotics.