タッチターゲットの間隔
インタラクティブ要素が正確にタップできるように十分な間隔を空ける
このルールに人工知能をどのように活用しているかを学びましょう！
チェックするポイント
インタラクティブ要素は、最小サイズが24dp × 24dpであるべきです。または、要素の中心に直径24dpの円を置いても他のターゲットと交差しないように、十分なパディングを周囲に設けるべきです または が他のターゲットの円と交差しないようにします。
インタラクティブ要素のタッチ領域は、視覚的な境界を超えて拡張される可能性があります。たとえば、TouchDelegateを使用してアクティブなタッチ領域を広げることができます。ただし、Dequeは、視覚的な境界とインタラクティブな境界を一致させるのがベストプラクティスであると考えています。これにより、エンドユーザーに対して明確な操作領域が提供され、成功の可能性が高まります。このため、このルールはインタラクティブ要素の視覚的境界が最小24dpを満たしていることもテストしています。
タッチターゲットの間隔とタッチターゲットのサイズの違いは？
タッチターゲットの間隔は、24dpの最小値でWCAG 2.2 AAのコンプライアンスを目指していますが、タッチターゲットのサイズはGoogleの48dp × 48dpの推奨により近づいています。Googleのガイドラインへの準拠は、Playストアへの提出時に問題が発生しないことを保証するため、両方のルールをサポートすることを強くお勧めします。
失敗例 ❌
Touch target spacing は不十分です
これらのコントロールは近すぎます - 1つの中心に24dp直径の円を配置すると他のコントロールと重なります
運動制限のあるユーザーは誤って別の要素をアクティベートする可能性があります
成功例 ✅
Touch target spacing は十分です
各コントロールは24dp × 24dp以上であるか、その周囲に十分なスペースがあり、24dp直径の円を中心に置いても隣接するターゲットと交差しません
概要
- このルールはユーザーに重大な影響を及ぼします
- インタラクティブ要素は少なくとも24dp×24dpであるか、要素に中心を置いた24dp直径の円が隣接ターゲットに重ならないように配置されている必要があります
- 視覚的およびインタラクティブ（ヒットエリア）の両方の境界は最低限を満たしていなければなりません
- スライダーはその長さに沿って少なくとも24dpの間隔を維持しなければなりません
ユーザーへの影響
タッチデバイスでは、小さなコントロールはすべての人にとって使い勝手の問題となります。さらに、運動制限のある人々は、独立してアクティブにできないほど近接している小さなターゲットに対しての操作が一段と困難です。
タッチターゲット間隔の問題を確認
アプリケーションを実行し、テストする要素を含む画面に移動します。
- Android Studioで、レイアウトインスペクターを開きます（ツール > レイアウトインスペクター）
- コンポーネントツリーまたはキャンバスでテストする要素を選択します
- 属性パネルで、選択した要素の幅、高さ、および位置を、近隣のインタラクティブ要素と比較して確認します
- 必要に応じて、デバイスのピクセル密度を特定してdp値を確認します
次のいずれかの結果が適用されます：
- 合格： 要素は少なくとも24dp × 24dpであり、利用可能なタップ可能領域を最小以下に減少させる重なり要素がありません
- 合格： 要素は24dp × 24dpより小さいですが、要素の周りのパディングが十分に大きく、24dp直径の円を要素の中心に置いても隣接するターゲットと交差しません
- 合格： スライダーは要素の長さに沿って少なくとも24dpのスペースを維持します
- 不合格： 要素は24dp × 24dpより小さく、隣接するインタラクティブ要素との間に十分なスペースがありません
- 不合格： 隣接するインタラクティブ要素がテスト対象要素のタップ可能領域を最小限以下に減少させます
問題を修正
タッチターゲットの間隔の問題を解決するには、各インタラクティブ要素が少なくとも24dp × 24dpであるか、要素に中心を置いた24dp直径の円が隣接するインタラクティブターゲットと交差しないほどのマージンを確保します。
XML
minimumHeightとminimumWidthを24dpに設定し、近隣のインタラクティブ要素の間にマージンを追加します。
コードにおいて：
Button button = findViewById(R.id.an_accessible_button_yay);
button.setMinimumHeight(24);
button.setMinimumWidth(24);レイアウト定義内で:
<Button
android:id="@+id/an_accessible_button_yay"
android:minimumHeight="24dp"
android:minimumWidth="24dp"
android:text="@string/batman_likes_accessible_buttons" />コンポーズ
Modifier.defaultMinSizeを使用して最小高さと幅を設定し、paddingを使用して近隣のインタラクティブ要素との間に間隔を追加します。
Button(
modifier = Modifier
.defaultMinSize(minWidth = 24.dp, minHeight = 24.dp)
.padding(start = 24.dp, top = 24.dp),
onClick = { }
) {
Text(stringResource(id = R.string.button))
}インタラクティブ要素の高さと幅を調整し、レイアウトプロパティを使用して要素間に間隔を追加します。
サイズ調整が容易でない特定の要素は、フレックスレイアウトを持つ
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のMaterialウィジェットは、デフォルトで48pt×48ptのタッチエリアを強制し、通常は十分な間隔を提供します。違反は、でカスタムタップターゲットを作成した場合に最も発生しやすくなります。
FlutterのMaterialウィジェットはデフォルトで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)
その他のリソース
Webコンテンツ アクセシビリティ ガイドライン(WCAG) 2.2、W3C勧告
- 成功基準 2.5.8 - ターゲットサイズ (最小)
- 2.5.8 AA - ターゲットサイズ (最小)について理解する