In ScrollView

Text should be within a scrollable view to ensure that all elements are visible on all screen sizes.

Impact

People utilizing Dynamic Type on iOS are most impacted. When Dynamic Type is on, text sizes can be increased and may move off-screen. If the text is not within a scroll view, the information will not be available to the end-user. Scroll views are a great way to support various screen sizes, ensuring all content is accessible.

Confirmation

1. If the content on the page takes up less than one screen, make all text larger with Dynamic Type:
   • 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 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
2. Attempt to scroll to the text element
   • Inaccessible: You were unable to scroll to the text element.
   • Accessible: You were able to scroll to the text element.

How to Fix

An issue found by this rule is caused by not using a UIScrollView or ScrollView in your application for text elements.

Note: If text is part of a pinned element, such as UINavigationBar, UITabBar, etc, UILargeContentViewer should be used instead.

UIKit

Add a UIScrollView as the parent view of your screen's elements. This tutorial from Ray Wenderlich offers a great guide.

SwiftUI

Adding text within a ScrollView:

     var body: some View {
        ScrollView {
            VStack  {
                HStack {
                    Text("This text is in a scroll view")
                        .padding()
                }
            }
        }
    }

React Native

Text elements should be in a ScrollView element. The ScrollView element should be within a SafeAreaView to ensure the content stays within the window's bounds while scrolling.

<SafeAreaView style={{ flex: 1 }}>
   <ScrollView>
     <View>
       <Text> Make sure each screen has a ScrollView! </Text>
     </View>
   </ScrollView>
</SafeAreaView>