WCAG 2.2 の新達成基準「ターゲットのサイズ (最低限)」

WCAG (Web Content Accessibility Guidelines) 2.2 では、「ターゲットのサイズ (最低限)」という達成基準が新たに追加されています。

ポインタ入力のターゲットのサイズは、少なくとも 24 × 24 CSS ピクセルである。ただし、次の場合は除く:

  • 間隔: 複数の小さなターゲット (24 × 24 CSS ピクセル未満のもの) が配置されており、それぞれの境界ボックスの中心に直径 24 CSS ピクセルの円があるとした場合に、その円が別のターゲットと重なる、又は別の小さなターゲットの円と重なることがない。
  • 同等: その機能は、この達成基準を満たす同一ページ上の別のコントロールを通じて達成できる。
  • インライン: ターゲットが文中に存在する、又は、そのサイズがターゲット以外のテキストに対する行の高さによって制約されている。
  • ユーザエージェントのコントロール: ターゲットのサイズがユーザエージェントによって決定され、かつコンテンツ制作者によって変更されていない。
  • 必要不可欠: そのターゲットを特定の方法で提示することが、必要不可欠である、又は伝達される情報に対して法的に要求されている。
出典 : WCAG 2.2 達成基準 2.5.8「ターゲットのサイズ (最低限)」(レベル AA)

「ターゲットのサイズ」については WCAG の前バージョン (2.1) から既に、達成基準 2.5.5「ターゲットのサイズ (高度)」(レベル AAA) があり、クリック / タップ可能なオブジェクトに対して少なくとも 44 × 44 CSS ピクセルの大きさを要求しています。これは、タッチインターフェース (スマートフォンやタブレット) でオブジェクトを指で操作することを想定したサイズ要件 (註1) です。

註1 : たとえば、Apple Developer Documentation (Human Interface Guidelines) の「Accessibility」のセクションには、「on touchscreen devices, a hit target needs to measure at least 44x44 pt」とあります。また、Google Material Design の「Accessibility」のセクションには、「For most platforms, consider making touch targets at least 48 x 48dp.」とあります。

これに対し、WCAG 2.2 で新たに追加された達成基準 2.5.8「ターゲットのサイズ (最低限)」(レベル AA) のほうは、ウェブの利用環境の多様性 (必ずしもモバイルアプリのように指で操作するとは限らない) を考慮に入れる形で、マウスやペンなどを用いた操作も含め、バランスを取ったサイズ要件になっています。

ところで、達成基準 2.5.5 と 2.5.8 の違いは、ターゲットの大きさ (44 x 44 CSS ピクセル / 24 × 24 CSS ピクセル) だけではありません。達成基準 2.5.8 には、達成基準 2.5.5 にはない「間隔」という例外が設けられています。簡単に言うと、「ターゲットのサイズが (最低限求められている) 24 x 24 CSS ピクセルに満たない場合でも、そのターゲットの中心から直径 24 CSS ピクセルの円があるとして、その円が、別のターゲット (または円) と重ならなければ OK とする」というものです。Steve Faulkner 氏が作成したブックマークレット「Target Size Bookmarklet」を使うと、この「間隔」の例外をイメージしやすいかもしれません。

24 x 24 CSS ピクセルに満たない四角形のボタンが3つ並んでいる。Target Size Bookmarklet を有効にすると、各ボタンの中心から直径 24 CSS ピクセルの円がオーバーレイ表示される。円が互いに重ならない程度に各ボタンが離れていれば OK だが、この例ではボタンの間隔が近すぎて円が重なっている箇所があり、「間隔」の例外を満たしていないことになる。(このスクリーンショットは、見やすくするために、実寸より大きい表示になっています。)
Target Size Bookmarklet の表示例

この「間隔」の例外は、実は要注意です。というのも、ターゲットサイズが 24 x 24 CSS ピクセルに満たない状況を許容してしまい、かつ、その場合のターゲットサイズ自体の下限を定めていないからです。極端な話、ターゲットサイズが極小 (たとえば 1 x 1 CSS ピクセル) であっても、別のターゲットから十分に離れてさえいれば、達成基準を満たすと拡大解釈できてしまうのです (参考 : 2.5.8: Adversarial Conformance — Adrian Roselli)。

なぜ「間隔」の例外が許容されるのかという疑問はありますが、この達成基準の意図として、小さなターゲットが近接しすぎる (ひいてはユーザーの誤操作を誘発する) ことを防ぐことが重視されているからかもしれません。WCAG 2.2 Understanding Docs (WCAG 2.2 解説書) の達成基準 2.5.8 のセクションでは、「Intent (意図)」として下記の記述があります。

The intent of this Success Criterion is to help ensure targets can be easily activated without accidentally activating an adjacent target. Users with dexterity limitations and those who have difficulty with fine motor movement find it difficult to accurately activate small targets when there are other targets that are too close. Providing sufficient size, or sufficient spacing between targets, will reduce the likelihood of accidentally activating the wrong control.
(この達成基準の意図は、隣接するターゲットを誤って作動させることなく、ターゲットを容易に作動できるようにするのを保証することである。巧緻性に限界がある利用者、及び細かい運動が困難な利用者は、別のターゲットが近すぎると、小さなターゲットを正確に作動させることが困難になる。十分なサイズ、又はターゲット間に十分な間隔を設けることで、間違ったコントロールが誤って作動する可能性が低くなる。)

出典 : Understanding Success Criterion 2.5.8: Target Size (Minimum) | WAI | W3C

また技術的に、ブラウザが自動でターゲットの領域をよしなに拡張してくれるようになっているという背景も、もしかしたらあるのかもしれません (参考 : Expanding your touch targets – Nicole Sullivan)。

私自身のスタンスとしては、アクセシビリティ診断の際にはこの達成基準 2.5.8 の「間隔」の例外を一応含み置くものの、改善提案として、クリック / タップ可能なオブジェクトは基本的に 24 x 24 CSS ピクセル以上にすることを推奨したいと考えます。「インライン」や「ユーザエージェントのコントロール」の例外を除いて、ターゲットサイズを敢えて 24 x 24 CSS ピクセル未満にデザインする妥当な理由がある場合はともかくとして、多くのウェブサイトやアプリケーションがスマートフォンやタブレットで利用されている昨今、ターゲットサイズを (達成基準 2.5.5 の要求ほどではないにせよ) なるべく大きく確保することが、より多くのユーザーにとってストレスのない体験につながるだろうと思うからです。