解説書 達成基準 2.5.5:ターゲットのサイズ (高度) (レベル AAA)

要約

目標

特にタッチスクリーンでは、コントロールをより簡単に操作できる。

何をすればよいか

カスタムターゲットを少なくとも 44 × 44 ピクセルにする。

なぜそれが重要か

小さなオブジェクトをタップできない人々もいる。

意図

この達成基準の意図は、手の震え、器用さの限界、又はその他の理由により、小さなターゲットをアクティブにすることが困難な利用者を支援することである。ターゲットが小さすぎると、ターゲットを狙うのが困難になる場合がある。マウス及び類似のポインティングデバイスは、これらの利用者にとって使用するのが困難な場合があり、より大きなターゲットは、ウェブページで良い結果を得るのに大いに役立つ。

タッチは、精度の粗い入力メカニズムであるため、特に問題がある。利用者は、マウス、スタイラスペンなどの入力と同じレベルの細かい制御ができない。指はマウスポインタよりも大きいため、通常、タッチ又はアクティブ化されている画面上の正確な位置を利用者が確認できなくなる。

この問題は、異なる種類の細かい入力及び粗い入力に対応する必要があるレスポンシブ又はモバイルサイト (例えば、マウスを使用する従来のデスクトップ又はラップトップと、タッチスクリーンを使用するタブレット又は携帯電話との両方でアクセスできるサイト) では、さらに複雑になる可能性がある。

この基準では最低限のターゲットサイズを定義するが、意図しないアクションの可能性を減らすために、より大きなサイズを使用することを勧める。これは、次のいずれかに該当する場合に特に重要である:

• コントロールが頻繁に使用される。
• インタラクションの結果を簡単に元に戻すことができない。
• コントロールが手の届きにくい場所、つまり画面の端の近くに配置されている。
• コントロールが連続するタスクの一部である。

利点

• タッチスクリーンが主な操作モードであるモバイルデバイスを使用する利用者
• 手の震えなどの運動障害のある利用者
• 細かい動きが困難な利用者
• 片手でデバイスにアクセスする利用者
• 指が大きい利用者、又は指もしくは指関節の一部だけでデバイスを操作する利用者
• ロービジョンの利用者は、ターゲットがよく見える可能性がある

事例

• 事例 1: ボタン
  画面上には三つのボタンがあり、各ボタンのターゲット領域は 44 × 44 CSS ピクセルである。

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

• Apple touch target size recommendations
• Windows UWP Guidelines for touch targets
• Google Material Design Touch targets
• web.dev Accessible tap targets
• Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF)
• One-Handed Thumb Use on Small Touchscreen Devices

テクニック

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。