Supports Dynamic Type

axe.configuration.optInToSupportsDynamicType = true

What We Check For

Text elements should have the required properties to support Dynamic Type and resize to the user's device-wide font size preference.

This rule enforces a Deque Best Practice. You can turn off this rule from the Mobile Dashboard or by ignoring the rule in tests written for iOS.

Learn how to turn off rules from the Mobile Dashboard.

At a Glance

• This rule has a Critical impact for users with low vision who rely on larger text
• Text elements must support Dynamic Type so they resize when the user changes their device font size

Impact to Users

People with low vision are most affected by text that cannot resize. Dynamic Type is an iOS feature that allows users to set a preferred font size device-wide, and apps are expected to honor that preference. When text elements do not support Dynamic Type, users who need larger text must struggle to read content that does not scale regardless of their settings.

Confirm Supports Dynamic Type Issue

1. Navigate to the screen containing text and observe the current font size and its layout
2. Enlarge the font size by changing the Dynamic Type setting:
   • If using a simulator:
     1. Open Accessibility Inspector
     2. On the top-left corner of the inspector, change the device from your Mac to the iOS simulator
     3. Select the Settings button in the top-right corner of the inspector
     4. Under Font Size, move the slider to a larger setting
   • If using an iOS 13.0+ device:
     1. Open Settings
     2. Select Accessibility
     3. Select Display & Text Size
     4. Select Larger Text
     5. Move the slider at the bottom of the page to a larger setting
3. Navigate back to your app and observe the following on the same screen:
   • Inaccessible: The text did not change size after updating the Dynamic Type setting
   • Accessible: The text did change size

Fix Issues

To resolve a Supports Dynamic Type issue, configure text elements to use scalable fonts that respond to the user's Dynamic Type setting.

UIKit

Set adjustsFontForContentSizeCategory = true on any text element so it updates when the user changes their Dynamic Type setting. Use UIFont.preferredFont(forTextStyle:) for system fonts, or UIFontMetrics to scale a custom font relative to a text style:

// System font — scales automatically to the user's Dynamic Type setting
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

// Custom font — scaled relative to a text style using UIFontMetrics
let customFont = UIFont(name: "Georgia", size: 17)!
label.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: customFont)
label.adjustsFontForContentSizeCategory = true

SwiftUI

In iOS 14 or above, you can support Dynamic Type in two ways:

• When using a custom font, set the .font property to .custom(_:size:relativeTo:) to ensure that fonts will relatively scale to the font style of the text element.
• When using a default font by size, text will scale automatically. However, if no font style is set, text elements will not scale according to their style. For example, text that is functioning as a title will scale differently than text that is functioning as body text. For the best experience, specify the font style to match the element's expected behavior. By using a modifier such as .font(.system(.largeTitle, design: .rounded)), you can expect the text to be the largest text on the page and serve as a proper title.

React Native

Set allowFontScaling={true} on every Text element to allow it to scale to the user's preferred device settings:

<Text style={{ color: 'black', fontSize: 18 }} allowFontScaling={true}> This text allows font scaling. </Text>

Can I Ignore This Rule?

Supports Dynamic Type has a Critical impact for users with low vision. Because this is a Best Practice rule, it can be turned off from the Mobile Dashboard or suppressed in individual tests. However, we strongly recommend supporting Dynamic Type across your app rather than ignoring the rule broadly. Learn more about ignoring rules.

Resources

Deque University Course Pages

• Success Criterion 1.4.4 - Resize Text (AA)
• 1.4.4 Resize Text (AA)

Note: Full access to Deque University resources requires a subscription.

Other Resources

• Web Content Accessibility Guidelines (WCAG) 2.1, W3C Recommendation
  • Success Criterion 1.4.4 - Resize Text
• Apple Developer Documentation
  • Scaling Fonts Automatically
  • Dynamic Type in SwiftUI