タッチターゲットのサイズ

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

チェック項目

すべてのインタラクティブな要素は、視覚的な領域とタップ可能な領域の両方において、最低でも44dp × 44dpのサイズであるべきです。

インタラクティブな要素のタッチエリアは、視覚的な範囲を超えて拡張されることがあります — 例として、 TouchDelegate を使用してアクティブなタッチ領域を拡大することが挙げられます。デックは慎重に考えた結果、ターゲットの視覚的な範囲とインタラクティブな範囲が一致するのが最善の方法としています。これにより、エンドユーザーに対し、成功のチャンスを最大化するための明確なエリアを提供します。したがって、このルールはインタラクティブ要素の視覚的な範囲も最低44dpを満たしているかをテストしています。

概要

このルールはユーザーに対して中程度の影響を及ぼします
すべてのインタラクティブ要素は、視覚的およびタップ可能なサイズが少なくとも44dp × 44dpである必要があります
視覚的および操作可能な（クリック可能なエリア）範囲の両方が最小基準を満たす必要があります
小さなコントロールは全ての人にとって使いづらく、特に運動障害のあるユーザーにはより問題となります

ユーザーへの影響

タッチデバイスでは、小さなコントロールは全ての人にとって使いやすさの問題です。さらに、運動障害を抱える人々にとって、小さなターゲットに触れたり狙ったりするのはより困難です。

タッチターゲットサイズの問題を確認する

アプリケーションを実行し、テスト対象の要素がある画面に移動します。

Android Studioで、 レイアウトインスペクター （ツール > レイアウトインスペクター）を開きます
コンポーネントツリーまたはキャンバスでテスト対象の要素を選択します
「属性」パネルで、 width を観察し、 height の値をdpで確認します
必要に応じて、デバイスのピクセル密度を確認してdpの値を確認します

どちらかの寸法が44dp未満の場合、その要素はこのルールに違反しています。

問題の解決

タッチターゲットサイズの問題を解決するには、各インタラクティブ要素の視覚的なサイズが少なくとも44dp × 44dpであることを確認します。視覚的な範囲とタップ可能な範囲は一致させるべきで、 TouchDelegate のみを使用してタッチエリアを拡大することは十分ではありません。

このルールによって発見された問題は、 height および/または width インタラクティブ要素の値が44dp以上でない場合に発生します。

XML

要素に minimumHeight および minimumWidth を設定するか、明示的に layout_width および layout_height 少なくとも44dpの値を設定します。

Button button = findViewById(R.id.my_button);
button.setMinimumHeight(44);
button.setMinimumWidth(44);

<Button
     android:id="@+id/an_accessible_button_yay"
     android:minimumHeight="44dp"
     android:minimumWidth="44dp"
     android:text="@string/batman_likes_accessible_buttons" />

Compose

を使用して、 Modifier.size または Modifier.defaultMinSize 最低でも44dp × 44dpのサイズを設定します。

Button(
     onClick = { },
     modifier = Modifier.size(width = 44.dp, height = 44.dp)
) {
     Text(text = "Scan for Issues")
}

React Native

プラットフォーム固有のサイズプロパティを使用して、コントロールが最小タッチターゲットのサイズを満たすようにします。

React Nativeの一部のコンポーネントは、サイズ調整を可能にするようにはカスタマイズできません。例えば、 Button コンポーネントなどです。可能であれば、すべてのインタラクティブ要素が少なくとも44dp×44dpであることを確認してください。それが不可能な場合は、サイズを調整できる代替コンポーネントを検討してください。

ヒント: カスタムコントロールを使用する場合は、アクセシビリティロールを正しく設定してください！

Flutter

FlutterのMaterialウィジェット（ElevatedButton、 IconButtonなど）は自動的に48dp x 48dpの最小タッチエリアを確保するため、これらの要件をデフォルトで満たします。違反は通常、視覚サイズを超えてタップエリアを拡張しない GestureDetectorで作成されたカスタムタップターゲットから発生します。

  // Failing — tap target is only 24×24
  GestureDetector(                                                                                      
    onTap: () {},
    child: Container(                                                                                   
      width: 24,                                                                                      
      height: 24,
      color: Colors.blue,
      child: const Icon(Icons.close, size: 16, color: Colors.white),                                    
    ),
  )                                                                                                     
                                                                                                      
  // Passing — tap target meets 44×44 minimum                                                           
  GestureDetector(
    onTap: () {},                                                                                       
    child: Container(                                                                                 
      width: 44,
      height: 44,
      color: Colors.blue,
      child: const Icon(Icons.close, size: 24, color: Colors.white),
    ),                                                                                                  
  )

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

タッチターゲットサイズはユーザーに対して中程度の影響を与えます。設計の制約により44dpの最小サイズを満たせない場合 — 例えば非常に密度の高いインターフェースのツールバーアイコンなど — この決定を文書化し、このルールを無視する前に代替案を検討してください。「ルールの無視」について詳しく学びましょう。

リソース

Deque University コースページ

2.5.5 ターゲットサイズ (AAA)

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

その他のリソース

Webコンテンツアクセシビリティガイドライン (WCAG) 2.1, W3C 勧告
- 達成基準 2.5.5 - ターゲットサイズ
WCAG 2.1 理解文書
- 2.5.5 AAA - ターゲットサイズの理解