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

達成基準 2.5.5 ターゲットのサイズ (レベル AAA): ポインタ入力ターゲットのサイズが 44 × 44 CSS ピクセル以上である。ただし、以下の場合は例外とする。

同等のものが存在する
そのターゲットと同等のリンク又はコントロールが同じページに 44 × 44 CSS ピクセル以上のサイズで存在する。
インラインである
そのターゲットが文中、又はテキストブロック内に存在する。
ユーザエージェントのコントロールである
ターゲットのサイズがユーザエージェントによって定められており、かつコンテンツ制作者が変更していない。
必要不可欠
そのターゲットを特定の方法で提示することが、情報伝達にとって必要不可欠である。

意図

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

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

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

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

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

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

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

注記

文の全体がターゲットで、かつその文がテキストのブロック内にない場合、ターゲットは少なくとも 44 × 44 CSS ピクセルである必要がある。

注記

文中又は文末にある脚注又はアイコンは、文の一部とみなされるため、最低限のターゲットのサイズの対象から除外される。

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

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

メリット

事例

関連リソース

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

達成方法

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

十分な達成方法

  • タッチターゲットが少なくとも 44 × 44 CSS ピクセルであることを確認する。
  • 画面拡大とは別に、ターゲットのサイズを変更するメカニズムを提供する。

参考達成方法

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

  • インラインのリンクは、動作させるための十分な大きさのターゲットを提供する。

失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。

  • 達成基準 2.5.5 の失敗例: ターゲットのサイズが 44 × 44 CSS ピクセル未満である。
  • 達成基準 2.5.5 の失敗例: リンクでもある段落のターゲットのサイズが 44 × 44 CSS ピクセル未満である。

重要な用語

CSS ピクセル (CSS pixel)

約 0.0213 度の視野角。

CSS ピクセルは、CSS におけるすべての長さ及び測定のための規範的な測定単位である。この単位は密度非依存で、ディスプレイに存在する実際のハードウェアピクセルとは異なる。ユーザエージェント及びオペレーティングシステムは CSS ピクセルが、ディスプレイの物理的な寸法と予想される視距離 (コンテンツ制作者は決定できない要因) を考慮した CSS Values and Units Module Level 3 reference pixel [css3-values] にできるだけ沿うように設定されていることを確認すべきである。

必要不可欠 (essential)

もし取り除いてしまうと、コンテンツの情報又は機能を根本的に変えてしまい、かつ、適合する他の方法では情報及び機能を実現できない。

ポインタ入力 (pointer input)

マウス、ペン、タッチ接触のように、画面上の特定の座標 (又は複数の座標群) をターゲットにできるデバイスからの入力。

注記

Pointer Events の「pointer」の定義を参照 [pointerevents]。

ターゲット (target)

ユーザインタフェース コンポーネントのインタラクティブな領域のような、ポインタアクションを受け入れるディスプレイの領域

注記

二つ以上のターゲットが重なっている場合、重なっているターゲットが同じアクションを実行する、又は同じページを開く場合を除いて、重なっている領域をターゲットサイズの計算に含めるべきではない。


訳注: このページは、2022 年 9 月 2 日版の Understanding WCAG 2.1 の翻訳です。2022 年 9 月 2 日版の原文は WAIC の管理するレポジトリから入手可能です。