ターゲットサイズが44×44ピクセルに届かないボタン

買い物かごに、商品が1行ずつ並んでいます。「リネンのナプキン　数量2」の横に、数量の「−」「＋」と削除の「×」、三つのアイコンボタンが並びます。ボタンは32×32ピクセルで、間隔は4ピクセルです。これは「ターゲットサイズが足りない、詰まったボタン」のガイドで、同じ行をレベルAAに合わせて直したときの大きさです。手が安定していれば、押すのは簡単です。

手の震えがある人が「＋」を狙うと、タップが中心から右へ18ピクセル、つまりボタンの縁から2ピクセル外に落ち、何も起きません。もう一度狙うと、今度はボタンの間の隙間に落ちます。数量を2から5にするには3回押せば済むはずが、調子の悪い日はその倍もタップすることになります。何かが壊れるわけではありませんが、やり直しの手間がかかります。

WCAG 2.5.5「ターゲットのサイズ（高度）」はレベルAAAの達成基準で、ポインターで押すターゲットに44×44 CSSピクセル以上を求めます。このボタンは32ピクセルです。24ピクセルを求める2.5.8「ターゲットのサイズ（最低限）」は満たすため、レベルAAの診断では何も見つかりません。W3Cの達成方法C44は、CSSでターゲットの大きさを指定して2.5.5を満たすもので、以下の修正はどちらもこの方法です。

2.5.8と違い、2.5.5には間隔による例外がありません。レベルAAでは、小さなターゲットでも、その中心に置いた直径24ピクセルの円が、ほかのターゲットや、ほかの小さなターゲットの円と重ならなければ満たせます。レベルAAAでは、ボタンの周りの余白は数えず、ターゲット自体が44×44ピクセル必要です。そのため、ここではボタンの間隔を広げても修正になりません。二つのクリック範囲が重なる場合、重なった部分はどちらのターゲットの大きさにも含めません。

四つの例外のどれにも当たりません。ボタンは文や文章の中になく、ブラウザーが大きさを決めているのでもなく、同じ機能の44ピクセルのコントロールもページになく、買い物かごのボタンを小さくしなければならない理由もありません。ブラウザーはボタンを指定されたとおりの大きさで表示します。32ピクセルはデザイン上の選択で、よく使われる大きさです。

2.5.5が対象とする人は2.5.8と同じで、その人たちにさらに余裕を持たせる基準です。このボタンと比べると、44ピクセルのターゲットは四方とも6ピクセル外側のタップまで受け止めます。揺れるバスの中で親指でタップする人、片手でスマートフォンを持つ人、指の関節や指先の一部でタップする人にも、同じ余裕が役立ちます。

10グループ中3グループに影響

• 全盲 （影響なし）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 筋力・可動域 （影響あり）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 筋力や可動域が限られる 手の震えや細かい動きに制限がある人のタップは、狙った位置から数ピクセルずれます。32ピクセルのボタンでは外れることが多く、そのたびに押し直す手間がかかります。
• 手の操作が限られる ヘッドポインターや視線入力、マウススティックは、手で動かすマウスより位置がぶれます。44ピクセルあれば、ターゲットの上で止める余裕ができます。
• 視覚が限られる 弱視の人には小さなボタンの縁がはっきり見えないため、狙いが正確になりにくくなります。

axe-coreの target-size ルールは、レベルAAの最低限である24ピクセルを基準に測るため、この行を合格にします。2.5.5のためのaxeのルールはありません。この診断ツールは、各コントロールの中心から縦横に外へ向かって、クリックがどこに当たるかを調べてクリック範囲を測るため、擬似要素で広げた範囲も数えます。そのうえで、クリック範囲が縦横とも24ピクセル以上あり、どちらかが44ピクセル未満のコントロールを、種類ごとに一つ、確認が必要な項目として記録します。文中のリンクは除きます。確認が必要な項目にとどめるのは、同じ機能の44ピクセルのコントロールがページのほかの場所にあるかどうかを、人にしか判断できないためです。自動のクリックテストは要素のちょうど中心を押すため、小さなボタンでも外しません。AIがコンポーネントライブラリーで画面を組み立てると、ボタンの大きさもそのまま引き継がれます。shadcn/uiとBootstrapの標準サイズと小さいサイズのボタンは、どれも44ピクセル未満です。