Overview

By default, the mobile app supports screen readers. However, the screen reader may not read some UI text correctly (for example, an acronym like “FICO”). The accessibility_formatters.json file allows you to configure the SDK to apply a transformation to the text before it’s passed to the screen reader to read aloud.

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:

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

Add Spaces to Search Patterns

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

client/default/assets/strings/accessibility_formatters.json

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.

client/default/assets/strings/accessibility_formatters.json

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.

client/default/assets/strings/accessibility_formatters.json

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”.