タッチターゲットのサイズ
インタラクティブコントロールが正確にタップできる十分な大きさであることを確認する
チェック対象
すべてのインタラクティブ要素は、視覚的およびタップ可能な領域の両方において、最小サイズが44pt × 44ptであるべきです。
インタラクティブ要素のヒットエリアはその視覚的境界を越えて拡大される可能性があります。たとえば、より大きなアクティベーション領域を持つジェスチャーレコグナイザーを付けることで可能です。しかし、詳細に検討した結果、Dequeは視覚的およびインタラクティブな境界を一致させることが最善の方法であると主張しています。これにより、エンドユーザーは最高の成功率を得るための明確なエリアが与えられます。したがって、このルールはインタラクティブ要素の視覚的境界が最小44ptを満たしているかどうかもテストしています。
一目で分かるポイント
- このルールはユーザーに対して中程度の影響を及ぼします
- すべてのインタラクティブ要素は、視覚的およびタップ可能なフレームが少なくとも44pt × 44ptでなければなりません
- 視覚的およびインタラクティブ（ヒットエリア）境界の両方が最小条件を満たさなければなりません
- 小さなコントロールは誰にとっても使い勝手が悪く、特に運動制限があるユーザーには問題となります
ユーザーへの影響
タッチデバイスでは、小さなコントロールは誰にとっても使いにくいものです。さらに、運動制限のある人々にとって、小さなターゲットとのインタラクションや狙いを定めるのはより困難です。
タッチターゲットのサイズの問題を確認
Xcode内でアプリケーションを実行し、テストするインタラクティブ要素を含む画面に移動します。
- Xcode内で デバッグビュー階層
- テストする要素を選択します
- インスペクターパネルが見えていない場合は開きます
- 次に サイズインスペクタ
- 選択した要素の幅と高さを確認します
幅または高さが44pt未満の場合、その要素はこのルールに違反します。
問題を修正
タッチターゲットのサイズ問題を解決するには、各インタラクティブ要素の視覚フレームが少なくとも44pt × 44ptであることを確認します。視覚的境界とタップ可能なヒットエリアが一致するべきです—ジェスチャーレコグナイザーを使用してタッチエリアだけを拡大するのは十分ではありません。
このルールによって見つかった問題は、アクティブなコントロールの frame が44pt以上の高さと幅を持っていない場合に発生します。
UIKit
インタラクティブ要素のフレームを少なくとも44pt × 44ptに設定するために、以下のいずれかの方法を使用します。
ストーリーボードの場合:
- インタラクティブ要素に移動します
- インスペクターパネルが見えていない場合は開きます
- 次に サイズインスペクタ
- の下で
Viewを更新し、widthのパラメータを少なくとも44ptにしますheight
コードの場合:
インタラクティブ要素の width と height を少なくとも44ptに更新します。 frame
これを初期化子と特定のフレームを通じて設定することができます:
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
次の .frame 修飾子を適用して、コントロールを少なくとも44pt × 44ptに拡張します。
TextFields
現在、SwiftUIではTextFieldのタップ可能エリアを拡大する一貫した方法はないことに注意してください。そのため、SwiftUI TextField が返します .INCOMPLETE このルールに関して。レーダーレポートがAppleに提出されました。
ボタン
ボタン全体ではなく、 label パラメータの内容にフレーム修飾子を使用します。
- 以下のように最初に 'action'、次に 'label' を指定する
Buttonラベルベースのイニシャライザを使用します。
Button(action: {
print("Button tapped")
}, label: {
Text("Tap here")
}
)- ボタンの
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 理解文書