タッチターゲットのサイズ
インタラクティブコントロールが正確にタップできる十分な大きさであることを確認する
チェック対象
すべてのインタラクティブ要素は、視覚的およびタップ可能な領域の両方において、最小サイズが44pt × 44ptであるべきです。
インタラクティブ要素のヒットエリアはその視覚的境界を越えて拡大される可能性があります。たとえば、より大きなアクティベーション領域を持つジェスチャーレコグナイザーを付けることで可能です。しかし、詳細に検討した結果、Dequeは視覚的およびインタラクティブな境界を一致させることが最善の方法であると主張しています。これにより、エンドユーザーは最高の成功率を得るための明確なエリアが与えられます。したがって、このルールはインタラクティブ要素の視覚的境界が最小44ptを満たしているかどうかもテストしています。
失敗例 ❌
Touch target size = 20pt × 20pt
この要素は44pt × 44ptの最小サイズを下回っています
タップエリアが小さすぎて信頼性のある操作が難しく、特に運動障害のあるユーザーには問題です
成功例 ✅
Touch target size = 44pt × 44pt
この要素は44pt × 44ptの最小サイズを満たしています
視覚的境界とタップ可能な範囲の両方が十分大きく、正確に操作できます。
一目で分かるポイント
- このルールはユーザーに対して中程度の影響を及ぼします
- すべてのインタラクティブ要素は、視覚的およびタップ可能なフレームが少なくとも44pt × 44ptでなければなりません
- 視覚的およびインタラクティブ（ヒットエリア）境界の両方が最小条件を満たさなければなりません
- 小さなコントロールは誰にとっても使い勝手が悪く、特に運動制限があるユーザーには問題となります
ユーザーへの影響
タッチデバイスでは、小さなコントロールは誰にとっても使いにくいものです。さらに、運動制限のある人々にとって、小さなターゲットとのインタラクションや狙いを定めるのはより困難です。
タッチターゲットのサイズの問題を確認
Xcode内でアプリケーションを実行し、テストするインタラクティブ要素を含む画面に移動します。
- Xcodeの中で、デバッグビュー階層を選択します
- テストする要素を選択します
- インスペクターパネルが見えていない場合は開きます
- サイズインスペクタを選択します
- 選択した要素の幅と高さを確認します
幅または高さが44pt未満の場合、その要素はこのルールに違反します。
問題を修正
タッチターゲットのサイズ問題を解決するには、各インタラクティブ要素の視覚フレームが少なくとも44pt × 44ptであることを確認します。視覚的境界とタップ可能なヒットエリアが一致するべきです—ジェスチャーレコグナイザーを使用してタッチエリアだけを拡大するのは十分ではありません。
このルールによって見つかる問題は、アクティブなコントロールのframeが44pt以上の高さと幅を持っていない場合に発生します。
UIKit
インタラクティブ要素のフレームを少なくとも44pt × 44ptに設定するために、以下のいずれかの方法を使用します。
ストーリーボードの場合:
- インタラクティブ要素に移動します
- インスペクターパネルが見えていない場合は開きます
- サイズインスペクタを選択します
Viewの下で、widthとheightのパラメータを少なくとも44ptに更新します
コードの場合:
インタラクティブな要素のframeのwidthとheightを少なくとも44ptに更新します。
これを初期化子と特定のフレームを通じて設定することができます:
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 44, height: 44))または、ビューの制約を通じて設定することもできます。ボタンに現在の制約がある場合は、その幅と高さを44ポイント以上に更新してください。そうでない場合は、制約を追加できます:
// Update Height:
myButton.heightAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true
// Update Width:
myButton.widthAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = trueSwiftUI
コントロールを少なくとも44pt × 44ptに拡大するために.frameモディファイアを適用します。
TextFields
現在、SwiftUIではTextFieldのタップ可能領域を大きくする一貫した方法がないことに注意してください。そのため、このルールに対してはSwiftUIのTextFieldが.INCOMPLETEを返します。Appleにレーダーレポートを提出済みです。
ボタン
全体のボタンではなく、labelパラメータの内容にフレームモディファイアを使用します。
Buttonのラベルベースの初期化子を使用し、'action'が最初のパラメータ、'label'が2番目のパラメータとして下記のように示します。
Button(action: {
print("Button tapped")
}, label: {
Text("Tap here")
}
)- Buttonの
labelパラメータの内容にフレームモディファイアを追加し、少なくとも44の高さと幅を指定します。
Button(action: {
print("Button tapped")
}, label: {
Text("Tap here")
.frame(width: 80, height: 45)
}
)React Native
プラットフォーム固有のサイズプロパティを使用して、コントロールが最小のタッチターゲットサイズを満たしていることを確認します。
React Nativeの一部コンポーネントは、Buttonコンポーネントのように、サイズ調整を可能にするカスタマイズができません。
可能であれば、すべてのインタラクティブな要素を最低でも44pt × 44ptにしてください。それができない場合は、サイズの調整が可能な代替コンポーネントを探ってください。
ヒント：カスタムコントロールを使用する際は、アクセシビリティの役割が正しく設定されていることを確認してください！
Flutter
FlutterのMaterialウィジェット（ElevatedButton、IconButtonなど）は自動的に48pt × 48ptの最小タッチ領域を持つため、デフォルトでこの要件を満たしています。違反は主に、視覚サイズを超えたタップエリアの拡張を行わない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),
),
)このルールを無視してもいいですか？
タッチターゲットサイズは、ユーザーのために中程度の影響があります。非常に密度の高いインターフェースでツールバーアイコンなど、44pt以上の最低サイズを満たせない場合は、原因を文書化し、ルールを無視する前に代替案を探ってください。ルールを無視することについてについてもっと学びましょう。
リソース
Deque University コースページ
注意：Deque University のリソースへの完全なアクセスにはサブスクリプションが必要です。
その他のリソース
- Webコンテンツアクセシビリティガイドライン（WCAG）2.1、W3C勧告
- WCAG 2.1 理解文書