Font accessibility on iOS 14+

On iOS, we can customize the font size for the entire system. It is located under Settings -> Accessibility -> Display & Text Size -> Larger Text

On this screen, we have 2 modes:

• The convenience mode: it allows the user to select the font size not in a real accessibility mode. In this mode, Larger Accessibility Sizes may be deactivated.
• The accessibility mode: it allows the user to select bigger font size. Larger Accessibility Size must be activated.

Important notes:

• Activating “Larger Accessibility Size” does not mean we are in the Accessibility mode, since we still can select lower font size.
• Deactivating “Larger Accessibility Size” does not mean that the device returns into its “normal state (no font customisation)”. It will keep the selected font size if compatible, or will the the higher font size possible if we were into the accessibility mode

Convenience mode

Convenience mode

Accessibility mode

Since the font size may vary, some views may be broken or truncated. This article is about the tips you can use to solve it.

Spacing between characters

In SwiftUI, you can define if a text allow tightening (compressing space between characters) using the method allowTightening.

Proportional metric using scaled metric property

Using the property wrapper ScaledMetric will scale the defined metric using the font configuration of the system.

ScrollView

Changing font size may make the text bigger that the screen. You can see it on the following example:

One way to fix it is using ScrollView. It will enable the user to scroll and the text won’t be truncated:

Text is not truncated and is now scrollable to the end

ScrollView with Spacer

Using scrollviews help to solve some accessibility problems but it creates others. All views can’t be encapsulated inside scrollview easily. It’s the case of view containing spacers, since it’s difficult for the scrollview to determine the scrollable frame using spacers.

For example, using scrollview on this kind of view:

View with spacers without a scrollview

This will produce:

View with spacer within a scrollview

One way to fix it is to help scrollview to determine its scrollable content frame using a GeometryReader:

ScrollView with scroll enabled when needed

Multiplying scrollviews make each view scrollable, even if all the content is already visible. The following code is a kind of hack to determine if we need to scroll using and overlay.

Some environment variables to use for accessibility

SizeCategory

@Environment(\.sizeCategory) var sizeCategory

This variable is used to determine the font mode. These are the different possible values for convenience font modes:

• extraSmall (smallest font size)
• small
• medium
• large
• extraLarge
• extraExtraLarge
• extraExtraExtraLarge

These are the different possible values for accessibility font modes:

• accessibilityMedium
• accessibilityLarge
• accessibilityExtraLarge
• accessibilityExtraExtraLarge
• accessibilityExtraExtraExtraLarge

LegibilityWeight

@Environment(\.legibilityWeight) private var legibilityWeight

The user can set the text weight to bold in Settings -> Accessibility -> Display & Text Size -> Bold Text. Here is the environment variable to determine the chosen mode:

• regular
• bold