タッチターゲットサイズとは何か、WCAGはどれくらいの大きさを求めるのか?
タッチターゲットサイズとは、ボタン、リンク、フォームコントロールのタップやクリックが実際に反応する範囲の大きさだ。アイコンがどう見えるかではなく、反応する領域を指す。16ピクセルのアイコンを24ピクセルの反応領域で包んでいれば、24ピクセルと数える。
WCAG 2.2で追加された達成基準2.5.8「ターゲットのサイズ(最低限)」はレベルAAで、ポインター入力の対象を24×24 CSSピクセル以上にすることを求める。より厳しい2.5.5「ターゲットのサイズ(強化)」はレベルAAAで、基準は44×44ピクセルだ。
なぜこの要件が必要なのか?
小さなターゲットは多くの人にとって障壁になる。手に震えがある人や運動制御が弱い人は誤タップしやすく、片手でスマートフォンを使う人や移動中の人も同じだ。誤タップは不便なだけでなく、隣が「削除」や「支払い」のような操作なら、実際の誤りにつながる。
2.5.8の考え方は、すべての要素を大きくすることを強制せずに、達成可能な最低ラインとして24ピクセルを定めることだ。より高い保証を求める場合は、2.5.5の44ピクセルを目指せる。
実際に、ある要素が基準を満たしているかどうかはどう判断するのか?
反応領域の幅と高さを測り、どちらも24 CSSピクセル以上なら合格だ。それより小さいターゲットでも、次の例外に当てはまれば合格になりうる。間隔(隣接するすべてのターゲットから24ピクセル以上離れている)、同等(同じページに基準を満たす別のコントロールが同じ機能を果たす)、インライン(ターゲットが文や文章ブロックの中にある)、ユーザーエージェントコントロール(サイズがブラウザで決まり、作者が変更していない)、本質的(特定の表示が不可欠、または法的に要求される)だ。
間隔の例外の確認方法は、小さいターゲットそれぞれの外接矩形の中心に直径24ピクセルの円を置き、その円が他のターゲットや他の小さいターゲットの円と交わらないことだ。
デザイナーやAIでUIを生成する人にとって何を意味するか?
デザインファイルのアイコンボタンが最も失敗しやすい。見た目では16ピクセルがすっきりしていても、反応領域も16ピクセルで他のボタンに密着していれば、サイズと間隔の両方の基準を満たさない。解決策は通常、アイコンを大きくすることではなく、パディングで反応領域を広げるか、間隔を空けることだ。
AIツールでUIを生成するときも、このチェックは受け入れ基準に入れる価値がある。第三者のレビューによれば、生成結果が色のコントラストとタッチターゲットの大きさで基本的なアクセシビリティ要件を満たさない例があった(このレビューは競合のサイトのもので、自分で確認が必要)。「すべての操作要素の反応領域を24×24ピクセル以上にする」とプロンプトに書き、納品前に実測するほうが、後から直すより安い。
W3Cによる「間隔」の例外の説明が最も分かりやすい実例だ。16ピクセルの小さなアイコンボタンは、それ自体が24ピクセル未満でも、その中心に置いた直径24ピクセルの円が、隣のボタンや他の小さなターゲットの円と交わらなければ、2.5.8を満たす。16ピクセルのボタン二つが密着していれば円が重なり、不合格になる。文中のインラインリンクは「インライン」の例外が直接適用され、24ピクセルの制限を受けない。
利点は、測定可能な最低ラインで誤タップを減らせることで、運動制御が弱い人にもモバイル利用者にも役立つ。欠点は、密度の高いUI(ツールバーや表の操作列)ではサイズと間隔を満たすのに余白が必要になり、情報密度とのトレードオフが生じること、そして24ピクセルはあくまで最低ラインであり、実際に押しやすいことまでは保証しないことだ。