達成基準 2.5.5: ターゲットのサイズを理解する

意図

この達成基準の意図は、たとえ利用者が小型の携帯用タッチスクリーンデバイスでコンテンツにアクセスしていたり、身体運動の巧緻性に制約があったり、その他の理由で小さなターゲットをうまく動作させることができなかったりしても、ターゲットのサイズが利用者にとって容易に動作可能な十分な大きさであることを担保することである。例えば、マウスのようなポインティングデバイスはこれらの利用者にとって使いにくいことがあるが、ターゲットを大きくすることによって、そのターゲットを動作させやすくすることができるだろう。

タッチというものは、精度の粗い入力メカニズムであるので、特に問題である。マウスやスタイラスペンといった入力手段を用いるのと同じレベルほどには、利用者は細かいコントロールができない。指はマウスポインタよりも大きく、概して、利用者がタッチしている／動作させようとしている正確な位置の視認を遮る。

モバイルのような小さな画面におけるレスポンシブなレイアウトでは、粗さの異なる入力操作を受け入れる必要があるため、この問題はさらに複雑になる可能性がある。従来のマウスを使ったデスクトップ／ラップトップと、タッチスクリーンを使ったタブレット又は携帯電話の、どちらからのアクセスも可能なサイトでは、どちらの入力タイプもサポートされていなければならない。

この達成基準では最低限のターゲットのサイズが定義されているが、ベストプラクティスとして、意図しない動作の可能性を減らすためにより大きなサイズを使用することが推奨される。これは、次のいずれかに該当する場合に特に重要である。

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

画面上のターゲットには様々な目的と用途があり、この達成基準では、それぞれに対する対処方法が定められている。

同等のターゲットが存在する: 画面上に、同じアクションを実行するターゲットが複数ある場合、44 × 44 CSS ピクセルのターゲットのサイズを満たすのは、ターゲットのうち一つだけでよい。

インラインである: 表示されるコンテンツは、多くの場合、画面幅に基づいてリフローされる。これはレスポンシブデザインとして知られており、水平方向と垂直方向の両方向にスクロールする必要がないので読みやすくなっている。リフローされたコンテンツでは、ターゲットは行のどこにでも表示される可能性があり、画面幅に基づいて位置が変わる可能性がある。ターゲットは行のどこにでも現れることができるので、そのサイズは行のテキスト及び、文又は段落の間隔より大きくすることはできない (もし大きくしたら、ターゲットが他の行と重なってしまう可能性がある)。このため、一つ以上の文の中に含まれるターゲットは、ターゲットのサイズ要件の対象から除外される。

ユーザエージェントのコントロールである: CSS 又はその他のサイズプロパティを用いてコンテンツ制作者がターゲットのサイズを変更しない場合、ターゲットは 44 × 44 CSS ピクセルのターゲットのサイズを満たす必要はない。

必要不可欠である: ターゲットが特定のターゲットのサイズである必要があり、かつ別の方法で提供できない場合、サイズ変更するとコンテンツの情報又は機能が本質的に変わってしまう場合は、ターゲットは 44 × 44 CSS ピクセルのターゲットのサイズを満たす必要はない。

メリット

• タッチスクリーンが主要なインタラクションモードであるモバイルデバイスを使用する利用者。
• 手の震えなどの運動障害のある利用者。
• 公共交通機関などの揺れにさらされる環境でモバイルデバイスを使用する利用者。
• 細かな身体運動が難しい利用者。
• 片手でデバイスにアクセスする利用者。
• 指が大きい、又は指や関節の一部だけでデバイスを操作している利用者。
• ターゲットを大きくすることで見やすくなることが期待できるロービジョンの利用者。

事例

• 例 1: ボタン
  画面上には 3 個のボタンがあり、各ボタンのタッチターゲット領域は 44 × 44 CSS ピクセルある。
• 例 2: 同等のターゲット
  ページには、同じ機能を実行する複数のターゲットが提供されている。ターゲットの一つは 44 × 44 CSS ピクセルである。その他のターゲットには、最低限のタッチターゲットとして 44 × 44 CSS ピクセルあるものはない。
• 例 3: アンカーリンク
  ターゲットはページ内リンクであり、ターゲットは 44 × 44 CSS ピクセル未満である。ただし利用者はブラウザの機能によって画面をスクロールできるため、ターゲットのサイズの要件を満たす必要はない。
• 例 4: 段落内のテキストリンク
  段落内のテキストリンクは、様々なタッチターゲット寸法を持つ。段落内のテキストリンクは、44 × 44 CSS ピクセルの要件を満たす必要はない。
• 例 5: 文中のテキストリンク
  文内のテキストリンクは達成基準の対象外であり、44 × 44 CSS ピクセルの要件を満たす必要はない。文全体がテキストリンクの場合は、そのテキストリンクのタッチターゲット領域は 44 × 44 CSS ピクセルを満たす必要がある。
• 例 6: 脚注
  文末の脚注リンクは、44 × 44 CSS ピクセルの要件を満たす必要はない。文末の脚注は文の一部とみなされる。
• 例 7: ヘルプアイコン
  文中又は文末にあるヘルプアイコンは、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
• Microsoft Guidelines for Building Touch Friendly Sites

達成方法

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

重要な用語