タッチターゲットの間隔

チェック内容

Interactive elements should have a minimum dimension of 24 × 24 points, or have enough padding around it so that if a circle with a diameter of 24 points is placed on the center of the element, the circle will not intersect with another target または with the circle for another target.

インタラクティブ要素のヒットエリアは視覚的な境界を超えて拡張される可能性があります。たとえば、より大きなアクティベーション領域を持つジェスチャー認識機能を追加することで実現できます。しかし、Dequeは、視覚的境界とインタラクティブな境界を一致させることが最善の実践であると主張します。これにより、エンドユーザーは成功の可能性を最大化するための明確なエリアを使用できるようになります。そのため、このルールではインタラクティブ要素の視覚的境界も最小24ポイントを満たしているかをテストしています。

失敗例 ❌

Touch target spacing は不十分です

これらのコントロールは互いに近すぎます - 一方の中心に直径24ptの円を置くと、もう一方と重なります

運動機能に制限があるユーザーは誤って異なる要素をアクティブにしてしまうかもしれません

成功例 ✅

Touch target spacing は十分です

各コントロールは少なくとも24pt × 24ptであるか、または24ptの直径の円をその中心に置いても隣接するターゲットと交差しないだけの十分な余地があります

概要

• このルールはユーザーに深刻な影響を与えます
• インタラクティブ要素は少なくとも24ポイント × 24ポイントであるか、要素の中心に24ポイントの直径の円を置いたとき、その円が隣接するターゲットに重ならないように配置されている必要があります
• 視覚的およびインタラクティブ（ヒットエリア）境界要件の両方を満たさなければなりません
• スライダーはその長さに沿って少なくとも24ポイントの間隔を維持する必要があります
• 小さく密集したコントロールは、運動制限のあるユーザーにとって特に難しいです

ユーザーへの影響

タッチデバイスでは、小さなコントロールは全ての人にとって使い勝手が悪いです。さらに、運動制限がある人は、独立して操作できないほど近接している小さなターゲットとの対話が困難です。

タッチターゲットの間隔の問題を確認

Xcode内でアプリケーションを実行し、テストするインタラクティブ要素を含む画面に移動します。

1. Xcode内で、Debug View Hierarchyを選択します
2. を選択します。
3. 検査パネルが表示されていない場合は開きます
4. を選択します。を選択してください
5. 隣接するインタラクティブ要素に対する選択された要素の幅、高さ、および位置を確認します

次のいずれかの結果が適用されます：

• 合格： 要素は少なくとも24pt × 24ptであり、最低限を下回るタップ可能なエリアを減少させる重なり合う要素がありません
• 合格： 要素は24pt × 24ptより小さいが、それを中心に置いた直径24ptの円が隣接するターゲットと交差しないくらい周囲に十分なパディングがあります
• 合格： スライダーは要素の長さに沿って少なくとも24ptのスペースを保持しています
• 不合格： 要素は24pt × 24ptより小さく、隣接するインタラクティブな要素との間に不十分な間隔があります
• 不合格： 隣接するインタラクティブ要素がテストされた要素のタップ可能エリアを最小しきい値を下回るように削減しています

問題の修正

タッチターゲットの間隔の問題を解決するために、各インタラクティブ要素が24ポイント × 24ポイント以上であるか、またはその中心に24ポイント直径の円を置いたときに隣接するインタラクティブターゲットと交差しない程度の余白を確保してください。

UIKit

最小の高さと幅を24ポイントに設定し、隣接するインタラクティブ要素の間に余白を追加します。

ストーリーボードで：

1. インタラクティブ要素に移動します
2. 検査パネルが表示されていない場合は開きます
3. を選択します。を選択してください
4. Viewの下で、widthおよびheightパラメータを少なくとも24ptに更新します

コードでは：

要素のframeのwidthとheightを少なくとも24ptに更新します。

let button = UIButton(frame: CGRect(x: 10, y: 20, width: 24, height: 24))

SwiftUI

インタラクティブ要素に.frameモディファイアを使用して、最小の高さと幅を設定します。

Button("Next")
    .frame(minWidth: 24, minHeight: 24, alignment: .leading)

React Native

インタラクティブ要素の高さと幅を調整し、それらの間にスペースを追加するためにレイアウトプロパティを使用します。

const styles = StyleSheet.create({
    button: {
        alignItems: 'center',
        backgroundColor: 'lightblue',
        width: 24, 
        height: 24
    }
});

特定の要素はサイズ調整が容易ではありません。これらはフレックスレイアウトのViewでラップし、要素間の適切な間隔を達成するためにgapプロパティを使用できます。

<View style={{ flex: 1, flexDirection: 'column', gap: 24 }}>
   <Slider
      step={1.0}
      maximumValue={100}
      style={{ width: 200, height: 60 }}
      value={sliderValue}
      accessible={true}
      onValueChange={setSliderValue}
      onSlidingStart={sliderValue => {
        setSliderValue(sliderValue);
      }}
      onSlidingComplete={sliderValue => {
        setSliderValue(sliderValue);
      }}
      accessibilityValue={{ now: "value: " + a11yValue }}
   />
</View>

Flutter

Flutterのマテリアルウィジェットは、デフォルトで48pt × 48ptのタッチエリアを強制し、通常は十分なスペーシングを提供します。違反は主にGestureDetectorを使用してカスタムタップターゲットを構築する場合に発生しやすく、スペーシングを手動で管理する必要があります。

// Passing — spacing added between targets
Row(
  spacing: 8.0,
  children: [
    GestureDetector(                                                          
      onTap: () {},
      child: Container(                                                       
        width: 20,                                                          
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_up, size: 14, color: Colors.white),
      ),                                                                      
    ),
    GestureDetector(                                                          
      onTap: () {},                                                         
      child: Container(
        width: 20,
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_down, size: 14, color: Colors.white),
      ),                                                                      
    ),
  ],                                                                          
)                                                                           

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

タッチターゲットスペーシングにはユーザー向けの重大な影響があります。この問題は、レイアウトの制約により本当に実施が不可能な場合を除いて、是正することをお勧めします。無視ルールについて詳しくはこちらをご覧ください。

リソース

Deque University コースページ

• WCAG 2.2 - 2.5.8 タッチターゲット (AAA)

注：Deque University リソースへの完全なアクセスにはサブスクリプションが必要です。

その他のリソース

• Web コンテンツ アクセシビリティ ガイドライン (WCAG) 2.2、W3C 勧告
  • 成功基準 2.5.8 - ターゲットサイズ (最小)
• WCAG 2.2 理解 ドキュメント
  • 理解 2.5.8 AA - ターゲットサイズ (最小)