Mobile Accessibility

1 Introduction

This guide teaches you how to make your native mobile application accessible. An accessible application ensures every user has a satisfactory experience regardless of their physical capabilities or how they use their devices. Specifically, this guide will explain the interactions between Mendix apps and mobile screen readers (VoiceOver for iOS and TalkBack for Android).

This guide only applies to native mobile apps.

2 Prerequisites

Before starting this guide, make sure you have completed the following prerequisites:

• Install Mendix Studio Pro
• Complete the Prerequisites section of Build a Mendix Native App in the Cloud
• Make sure you are using Make It Native 9 app

3 Setting Up Accessibility for Mendix Native Widgets

Mendix provides accessible widgets by default when possible, and also provides configurable properties to customize the accessibility experience.

3.1 Accessibility Properties

3.1.1 Accessible

When true, indicates that the view is an accessibility element. If is set to false, the screen reader will avoid it. Most widgets have the accessible property set to true by default.

3.1.2 Screen Reader Caption

This caption does not appear on the screen, but it lets screen readers audibly describe on-screen elements making navigation easier for people with visual disabilities.

3.1.3 Screen Reader Hint

A screen reader hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label. Hints are announced by screen readers after the captions.

3.2 Example: Button Widget Accessibility

The native button widget is accessible by default and the screen reader caption will match the button’s caption by default. You can override that through the button’s properties:

3.3 Testing Screen Reader Accessibility

3.3.1 Android

To enable TalkBack (the Android screen reader), go to the Settings app on your Android device or emulator. Tap Accessibility, then TalkBack. Toggle the Use service switch to enable or disable it.

3.3.2 iOS

To enable VoiceOver (the iOS screen reader), go to the Settings app on your iOS device (it is not available for simulator). Tap Accessibility. There you will find many accessibility tools, such as bolder text, increased contrast, and VoiceOver.

3.4 Special Widgets Use Cases

3.4.1 Container

If a container is accessible, it groups its children into a single selectable element. By default containers are not accessible in order to allow accessibility for children. This can be configured differently if your app demands it.

As an example, imagine a list item composed of an image and two text labels which you want to be treated as a single item by screen readers. To achieve this, embed the image and text labels in a container and enable accessibility for the container. Make sure to update the caption and hint to properly reflect all content.

3.4.2 Image

An accessible image requires a screen reader caption as a property because there is no way to set a default descriptive caption for images.

4 Configuring Accessibility in Custom Widgets

React native documentation has a helpful accessibility document you can use as a reference while building custom widgets.

Here are some selected properties which you might be particularly interested in:

The widget’s XML file can be updated to contain configurations similar to these:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<propertyGroup caption="Accessibilty">
    <property key="accessible" type="boolean" defaultValue="true">
        <caption>Accessible</caption>
        <description />
    </property>
    <property key="screenReaderCaption" type="textTemplate" required="false">
        <caption>Screen reader caption</caption>
        <description />
    </property>
    <property key="screenReaderHint" type="textTemplate" required="false">
        <caption>Screen reader hint</caption>
        <description />
    </property>
</propertyGroup>