Overview

By default, the mobile app supports screen readers. If you add new terminology to the front-facing text in your app, screen readers may read it incorrectly. You can define how the screen reader reads this terminology, and other text, using the accessibility formatters system.

The accessibility formatters system uses two classes of formatters:

  • specific
  • permanent

Specific formatters have two types of regex search patterns: spacers and replacers. Spacers add spaces. Replacers replace a specific search pattern with a given output. You can add multiple patterns to each specific formatter type.

Permanent formatters are similar to spacers and replacers, but apply globally throughout the entire app.

When defining a custom accessibility formatter, copy client/default/assets/strings/accessibility_formatters.json to institutions/mxmobile/assets/mxmobile/strings. Then, edit institutions/mxmobile/assets/mxmobile/strings/accessibility_formatters.json.

Here’s what the file looks like by default:

accessibility_formatters.json file in client folder
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
  "permanent": {
    "spacers": [
      "FICO"
    ]
  },
  "accounts": {
    "spacers": [
      "[0-9]{4}\\s?\\*",
      "\\*[0-9]{4}"
    ],
    "replacers": {
      "- \\$": "-$"
    }
  },
  "payees": {
    "spacers": [
      "\\.[0-9]{4}"
    ],
    "replacers": {}
  },
  "phone_numbers": {
    "spacers": [
      "[0-9]{10}",
      "[0-9]{3}-[0-9]{3}-[0-9]{4}",
      "(xxx|XXX)(-|.)(xxx|XXX)(-|.)[0-9]{4}"
    ]
  },
  "amount": {
    "replacers": {
      "- \\$": "minus $"
    }
  },
  "last_4_digits": {
    "spacers": [
      ".*[0-9]{4}"
    ],
    "replacers": {
      "\\*\\*\\*\\* ": ""
    }
  }
}

Specific Formatters

Specific Formatter Purpose
Account Used for account names and to space out account numbers.
Amount Used for currency labels and to ensure negative values are read correctly.
Payee Used in some money movement feature views and bottom sheets to space out the payees account number suffix.
Phone Used to space out phone numbers so they are read as individual numbers.
Last4 Unsupported.

Add Spaces to Search Patterns

Spacers scan text and add spaces where necessary to ensure a clear and understandable reading by the screen reader.

Example:

1
2
3
4
5
6
  "accounts": {
    "spacers": [
      "[0-9]{4}\\s?\\*"
    ]
  }
}

In the previous example, the screen reader will read “*2345 Savings account” as “* 2 3 4 5 Savings account”.


Replace Search Patterns

Replacers completely replace the matching search pattern they find with a specific text output when being read by the screen reader.

Example:

1
2
3
4
5
6
7
{
  "amount": {
    "replacers": {
      "- \\$": "minus $"
    }
  }
}

In the previous example, the screen reader will read any string that includes “- $” as “minus $”.


Permanent Formatters

Permanent formatters are specific strings that support the screen reader throughout the entire app, rather than a specific section. This can be a spacer or replacer.

Example:

1
2
3
4
5
6
7
{
  "permanent": {
    "spacers": [
      "FICO"
    ]
  }
}

In the previous example, the screen reader will read any strings in the app that include “FICO” as “F I C O”.