Supports Dynamic Type

Link to Supports Dynamic Type copied to clipboard

note

This is an experimental rule, and therefore its result(s) are considered to be in beta testing. Learn more about experimental rules and how you can help improve them.

Running this rule will result in increased scan times.

important

This rule is launching for the XCUI framework with v2.6.0. It will be opt-in only for a limited time to collect feedback. Try it out and let us know what you think.

After initializing the AxeDevTools object to begin testing, opt-in to the rule by using the configuration:

axe.configuration.optInToSupportsDynamicType = true

where axe refers to the AxeDevTools object initialized when logging in.

Text elements should have the required properties to support Dynamic Type and resize the text to the user's device preference.

Impact

People with low vision are most affected by text that cannot resize. Dynamic Type is an assistive technology that allows the end-user to change the font size device-wide to read more easily.

Confirmation

Navigate to the screen containing text and observe the current font size and its layout
Enlarge the font size by changing the Dynamic Type setting:
- If using a simulator:
  1. Open up 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 up 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
Navigate back to your app and observe the same screen
- Inaccessible: The text did not change size after updating the Dynamic Type setting.
- Accessible: The text did change size.

How to Fix

An issue found by this rule occurs when views do not support Dynamic Type settings.

UIKit

Read more about supporting Dynamic Type in UIKit here.

SwiftUI

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

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 - as the text gets bigger the title text will always be bigger than the body text. For the best experience, be sure to 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

Ensure that every text element's allowFontScaling property is set to true to allow text to scale to the user's preferred device settings.

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