スクロールビュー内で

すべての要素があらゆる画面サイズで表示されるように、スクロールできるビュー内にテキストを配置する必要があります。

影響

iOSでDynamic Typeを使用している人々が最も影響を受けます。Dynamic Typeが有効になると、テキストサイズが大きくなり、画面外に移動する可能性があります。テキストがスクロールビュー内にない場合、情報はエンドユーザーに提供されません。スクロールビューはさまざまな画面サイズをサポートし、すべてのコンテンツがアクセス可能であることを保証する優れた方法です。

確認

1. ページ上のコンテンツが1画面未満の場合、Dynamic Typeでテキストをすべて大きくしてください。
   • シミュレーターを使用する場合：
     1. アクセシビリティインスペクターを開く
     2. インスペクターの左上隅で、デバイスをMacからiOSシミュレーターに変更する
     3. インスペクターの右上隅にある「設定」ボタンを選択する
     4. 「フォントサイズ」欄で、スライダーを大きい設定に動かす
   • iOS 13.0以上のデバイスを使用する場合：
     1. 設定を開く
     2. 「アクセシビリティ」を選択する
     3. 「画面表示とテキストサイズ」を選択する
     4. 「より大きな文字」を選択する
     5. ページ下部のスライダーを大きい設定に動かす
2. テキスト要素までスクロールしてみる
   • アクセス不可：テキスト要素までスクロールできませんでした。
   • アクセス可能：テキスト要素までスクロールできました。

修正方法

このルールで見つかった問題は、アプリケーションでテキスト要素にUIScrollViewまたはScrollViewを使用していないことによって引き起こされます。

注意：テキストがUINavigationBarやUITabBarなどの固定要素の一部である場合は、代わりにUILargeContentViewerを使用する必要があります。

UIKit

画面の要素の親ビューとしてUIScrollViewを追加します。 Ray Wenderlichのチュートリアル は素晴らしいガイドを提供しています。

SwiftUI

スクロールビュー内にテキストを追加する方法：

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

React Native

テキスト要素は ScrollView 要素内にあるべきです。 ScrollView 要素は SafeAreaView 内にあるべきです。これにより、スクロール中もコンテンツがウィンドウの境界内にとどまります。

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