タッチターゲットの間隔

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

チェック内容

インタラクティブ要素は最小寸法24 × 24ポイントであるか、要素の中心に24ポイントの直径の円を置いたとき、その円が他のターゲットと交差しないように十分な余白があるべきです。 または 他のターゲットの円と重なりません。

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

tip

タッチターゲット間隔とタッチターゲットサイズの違いは何ですか？

タッチターゲットの間隔はWCAG 2.2 AAの24ポイント最小基準を対象としており、タッチターゲットサイズはAppleの44 × 44ポイントの推奨に沿っています。どちらの規則もサポートすることを強くお勧めします - Appleのガイドラインを順守することで、App Storeへの提出時に問題が発生することを避けられます。 両方の 規則をサポートすることを強くお勧めします - Appleのガイドラインを遵守することで、App Storeへの提出時に問題が発生することを避けられます。

概要

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

ユーザーへの影響

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

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

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

Xcode内で、 Debug View Hierarchy
を選択します。
要素をテストするために選択します
検査パネルが表示されていない場合は開きます サイズインスペクター
隣接するインタラクティブ要素に対する選択された要素の幅、高さ、および位置を確認します

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

合格： 要素は少なくとも24ポイント × 24ポイントであり、利用可能なタップ領域を最小値以下に減少させる重なり合う要素はありません
合格： 要素は24ポイント × 24ポイントより小さいですが、それを中心とした24ポイント直径の円が隣接するターゲットと交差しない程度の余白があります
合格： スライダーは要素の長さに沿って少なくとも24ポイントの間隔を維持します
不合格： 要素は24ポイント × 24ポイントより小さく、隣接するインタラクティブ要素との間に十分な間隔がありません
不合格： 隣接するインタラクティブ要素がテストされた要素のタップ可能領域を最小しきい値以下に減少させる

問題の修正

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

UIKit

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

ストーリーボードで：

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

コードでは：

要素の width および height の高さと幅を少なくとも 24pt にするように更新します。 frame に対して

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 - ターゲットサイズ (最小) の理解