タッチターゲットのサイズ
インタラクティブなコントロールが正確にタップできるように十分な大きさであることを確認します
チェック項目
すべてのインタラクティブな要素は、視覚的な領域とタップ可能な領域の両方において、最低でも44dp × 44dpのサイズであるべきです。
インタラクティブ要素のタッチエリアは、その視覚的な境界を超えて拡大することができます。例えば、アクティブなタッチ領域を拡大するためにTouchDelegateを使用することができます。慎重に検討した結果、Dequeはターゲットの視覚的境界とインタラクティブな境界を一致させるのが最善のプラクティスであるとしています。これにより、エンドユーザーが成功する可能性を高めるために、明確な領域を提供します。したがって、このルールはインタラクティブ要素の視覚的境界が最低44dpを満たしているかどうかをテストしています。
失敗例 ❌
Touch target size = 20dp × 20dp
この要素は44dp × 44dpの最小サイズを下回っています
タップエリアが小さすぎて、特に運動機能が制限されているユーザーには信頼性が低いです。
合格例 ✅
Touch target size = 44dp × 44dp
この要素は44dp × 44dpの最小サイズを満たしています
視覚的境界とタップ可能な境界の両方が、正確にアクティベートするのに十分な大きさです。
概要
- このルールはユーザーに対して中程度の影響を及ぼします
- すべてのインタラクティブ要素は、視覚的およびタップ可能なサイズが少なくとも44dp × 44dpである必要があります
- 視覚的および操作可能な（クリック可能なエリア）範囲の両方が最小基準を満たす必要があります
- 小さなコントロールは全ての人にとって使いづらく、特に運動障害のあるユーザーにはより問題となります
ユーザーへの影響
タッチデバイスでは、小さなコントロールは全ての人にとって使いやすさの問題です。さらに、運動障害を抱える人々にとって、小さなターゲットに触れたり狙ったりするのはより困難です。
タッチターゲットサイズの問題を確認する
アプリケーションを実行し、テスト対象の要素がある画面に移動します。
- Android Studioでレイアウトインスペクターを開きます（ツール > レイアウトインスペクタ）
- コンポーネントツリーまたはキャンバスでテスト対象の要素を選択します
- 属性パネルで、dpでの
widthおよびheightの値を確認します - 必要に応じて、デバイスのピクセル密度を確認してdpの値を確認します
どちらかの寸法が44dp未満の場合、その要素はこのルールに違反しています。
問題の解決
タッチターゲットサイズの問題を解決するには、インタラクティブ要素の視覚的サイズが少なくとも44dp × 44dpであることを確認してください。視覚的境界とタップ可能なヒットエリアは一致させるべきです。TouchDelegateのみでタッチエリアを拡大することは十分ではありません。
このルールによって発見された問題は、インタラクティブ要素のheightおよび/またはwidthの値が44dp以上でない場合に発生します。
XML
要素にminimumHeightとminimumWidthを設定するか、少なくとも44dpの明示的なlayout_widthとlayout_heightの値を設定します。
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 × 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 コースページ
注: Deque University のリソースを完全に利用するにはサブスクリプションが必要です。
その他のリソース
- Webコンテンツアクセシビリティガイドライン (WCAG) 2.1, W3C 勧告
- WCAG 2.1 理解文書