すべてのタッチターゲットは24ピクセルの大きさにするか、十分なスペースを残さなければなりません
Need accessibility training?
Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.
Compliance Data & Impact
Disabilities Affected
- 盲目
- 視力低下
- 運動・器用さ
Standard(s)
- WCAG 2.2 (AA)
WCAG 達成基準 [WCAG 2.2 (AA)]
- 2.5.8: Target Size
修正方法
正しいマークアップソリューション
タッチターゲットのサイズや間隔が十分である
<button style="font-size: 24px">Submit</button>
<button>+</button>
<button style="margin-left: 10px">Adjacent Target</button>誤ったマークアップソリューション
タッチ ターゲットの隠れていないサイズが小さすぎ、別のタッチ ターゲットに近すぎます
<button id="target">+</button>
<button style="margin-left: -10px">Adjacent Target</button>なぜ重要なのか
タッチ ターゲットは、「隣接するターゲットを誤ってアクティブ化することなく簡単にアクティブ化できる」ように、十分なサイズと間隔が必要です。タッチ ターゲットが小さすぎたり、近すぎたりすると、ユーザーがタッチ ターゲットをアクティブにすることが難しくなります。
十分な大きさのターゲット (またはそれができない場合は十分なターゲット間隔) があれば、自信を持ってターゲットを定めたり、小さなコントロールを操作したりすることが難しいすべてのユーザーの役に立ちます。恩恵を受けるユーザーは、ただし、これらに限定されません。
- タッチスクリーンが主な操作手段であるモバイルデバイスを使用する人々。
- 手の震えなどの運動障害を持つ、マウス、スタイラス、タッチ入力を使用する人。
- 公共交通機関など、揺れにさらされる環境でデバイスを使用する人。
- 微細な動きに困難を感じるマウスユーザー。
- 片手でデバイスにアクセスする人。
- 指が大きい人、または指や指関節の一部だけでデバイスを操作する人。
達成基準2.5.8: ターゲット サイズ (最小) の理解を参照してください。
詳細情報、例、例外については、こちらをご覧ください。
ルールの説明
タッチ ターゲットのサイズは、少なくとも24 x 24 CSSピクセルである必要があります。サイズは、タッチ ターゲットの最大の遮蔽されていない領域を取得して計算します。ターゲットのサイズが不十分な場合は、ターゲットを中心とし、他のターゲットや他の小さいサイズのターゲット上の円と交差しない、直径24ピクセルの仮想円を描画できる必要があります。
仕組みについて (簡単に言うと)
タッチ ターゲットの遮られていないサイズと他のタッチ ターゲットまでの距離を確認してください。
リソース
Deque University コースのページ (要登録)
関連するコース情報はありません。
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
すでにフィードバックをいただきました、ありがとうございます。.
あなたの回答は次のとおりです。
この情報は役に立ちましたか?
フィードバックが提出された日付/時刻:
フィードバックが提出された日付/時刻: