タッチターゲットの間隔
インタラクティブ要素が正確にタップできるように十分な間隔を空ける
このルールのためにどのように人工知能を活用しているか学びましょう！
チェックするポイント
インタラクティブ要素は最小寸法が24dp x 24dpであるか、または要素の中心に直径24dpの円を置いても他のターゲットと交差しないように十分なパディングが必要です または 他のターゲットのための円と重ならないようにします。
インタラクティブ要素のタッチ領域は、その視覚的な境界を超えて拡張される可能性があります - 例えば、 TouchDelegate を使用してアクティブなタッチ領域を拡大することもできます。慎重に考慮した結果、Dequeは目に見えるターゲットの境界とインタラクティブ領域を一致させるのがベストプラクティスであると考えています。これにより、エンドユーザーは成功の可能性を最大化するために明確なエリアで操作できるようになります。したがって、このルールではインタラクティブ要素の視覚的境界が最小24dpを満たしていることもテストしています。
タッチターゲットの間隔とタッチターゲットのサイズの違いは？
タッチターゲットの間隔は、WCAG 2.2 AAの24dpの最低基準を対象としていますが、 タッチターゲットのサイズ はGoogleの推奨する48dp x 48dpにより近いものです。 両方の ルールをサポートすることを強くお勧めします - Googleのガイドラインを遵守することで、Playストアへの提出時に問題が発生しません。
概要
- このルールはユーザーに重大な影響を及ぼします
- インタラクティブ要素は少なくとも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 React Native
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 Flutter
<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のタッチエリアを強制し、通常は十分な間隔を提供します。違反は、でカスタムタップターゲットを作成した場合に最も発生しやすくなります。
、その場合は間隔を手動で管理する必要があります。 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 - ターゲットサイズ (最小)について理解する