スクロールビュー内で

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Not for use with personal data

確認事項

テキストはスクロール可能な領域内に含まれている必要があります。これにより、テキストサイズが変更された場合でも、すべてのコンテンツが見えるようになります。

注: このルールはテキストのサイズを変更したり、拡大可能かどうかを確認するものではありません。代わりに、テキストが拡大されるか、ローカライズにより長くなっても、ユーザーがアクセスできることを確認します場合。

不適合な例 ❌

iOS phone screen mockup showing a settings screen with a list of toggle options inside a UIView container. Content has been resized and overflows the container.

要素は UIView。

サイズ変更されたテキストが切り取られ、 cannot be reached by scrolling。

適合した例 ✅

iOS phone screen mockup showing a settings screen with a list of toggle options inside a UIScrollView container. Content has been resized and overflows the container.

要素は UIScrollView。

サイズ変更されたテキストが切り取られるが、 can be accessed by using the scroll bars。

概要

このルールはユーザーに重大な影響を与えます
ユーザーがテキストサイズを拡大すると、コンテンツが溢れたり切り取られたりして、スクロールできない場合にはアクセスできなくなります
このルールは、UIScrollViewやScrollViewのようなスクロール可能なコンテナにラップされていないテキスト要素を指摘します
ヘッダー、本文テキスト、テキストラベル付きのボタン、およびフォーム要素にはすべてスクロールサポートが必要です

ユーザーへの影響

iOSでDynamic Typeを使用してテキストサイズを拡大するユーザーは、このルールの違反により最も影響を受けます。Dynamic Typeがオンの場合、サイズが増すとテキストが画面外に移動したり、切り取られたりして情報が利用できなくなる可能性があります。スクロール可能なビューは、さまざまな画面サイズに対応し、すべてのコンテンツをアクセス可能にする優れた方法です。

ScrollView問題の確認

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

問題の修正

ScrollViewの問題を解決するには、あなたのアプリケーションのテキスト要素の親コンテナとしてUIScrollViewやScrollViewを追加してください。

UIKit

画面上のすべてのインタラクティブおよび静的要素の親コンテナとしてUIScrollViewを追加します。

class MyViewController: UIViewController {
    override func viewDidLoad() {
      super.viewDidLoad()
      
      let scrollView = UIScrollView()
      let contentView = UIView()
      
      view.addSubview(scrollView) /* Add the scroll view to the main view first */
      scrollView.addSubview(contentView)  /* Add any content to the scroll view */ 
      
      /* Add your text and buttons to contentView instead of view */
      let label = UILabel()
      label.text = "This content can overflow when resized, so put it inside of a scrollView!"
      label.numberOfLines = 0
      contentView.addSubview(label)
      
      /* Set up basic constraints */
      scrollView.setConstraintsFillParentView()
      contentView.setConstraintsFillParentView()
  }
}

SwiftUI

ScrollView内にテキストを追加:

     var body: some View {
        ScrollView {
            VStack  {
                HStack {
                    Text("This text can grow, and users can scroll so they can still see all of it!")
                        .padding()
                }
            }
        }
    }

React Native

テキスト要素をScrollView要素内にネストします。ScrollView要素はSafeAreaView内にあるべきで、スクロール中にコンテンツがウィンドウの境界内に収まることを保証します。

<SafeAreaView style={{ flex: 1 }}>
   <ScrollView>
     <View>
       <Text> Make sure each screen has a ScrollView so users can access all of your content! </Text>
     </View>
   </ScrollView>
</SafeAreaView>

Flutter

ユーザーが好みのフォントサイズを増やしたときでも、テキストがアクセス可能であるようにSingleChildScrollViewで画面のコンテンツをラップします。

Scaffold(
  body: SafeArea(
    child: SingleChildScrollView(
      child: Padding(                                                         
        padding: EdgeInsets.all(12.0),
        child: Column(                                                        
          children: [                                                       
            Text('This text can grow when users increase their font size, and they can scroll to see all of it!'),
          ],                                                                  
        ),
      ),                                                                      
    ),                                                                      
  ),
)

このルールを無視しても良いか？

このルールはユーザーに重大な影響を与えるため、以下の既知の制限を除いて、このルールによって見つかった問題はすべて修正する必要があります。テキストが画面上に固定された要素、例えば画面をスクロールしても同じ位置にとどまるUINavigationBarやUITabBarの一部である場合、ScrollViewの代わりにUILargeContentViewer要素を使用してください。この要素にUILargeContentViewerが実装されているかどうかを私たちのルールでは検出できず、アクセシブルな体験を実装していてもIn ScrollView failureを依然としてフラグします。このような場合、このルールを無視することを選択することができます。規則の無視について詳しく学んでください。

リソース

Deque University 講座ページ

達成基準 1.4.4 - テキストのリサイズ

注：Deque University のリソースを完全に利用するには、サブスクリプションが必要です。

その他のリソース

Web コンテンツアクセシビリティガイドライン 2.2、理解の手引き
- 達成基準 1.4.4 - テキストのリサイズの理解
UIScrollView チュートリアル