タップ領域は24px・44px・48dpのどれにすべきか
WCAG 2.2のレベルAAは24×24 CSS px、AAAは44×44を基準にします。Androidの48dpとの違いと、小さなアイコンの操作領域を広げる方法を整理します。
閉じるアイコンははっきり見えるのに、指で押すと隣のボタンが反応することがあります。アイコンの表示サイズと実際に反応する領域をそろえる必要はありません。アイコンを小さく保ったまま、透明な余白を含むボタン領域を広げられます。では24px、44px、48dpのどれを使えばよいのでしょうか。
Webの最低基準は24×24 CSS px
WCAG 2.2の達成基準2.5.8は、ポインター入力のターゲットを24×24 CSSピクセル以上と定めています。WCAG 2.2で追加されたレベルAAの基準です。幅と高さを24pxにすれば終わりではありません。W3Cの解説では、軸に沿った24×24の正方形がターゲットの中に完全に収まる必要があります。角が丸い形では、その正方形が入らず小さいターゲットと判定されることがあります。
小さいターゲットが必ず失敗するわけではありません。境界ボックスの中心に直径24 CSS pxの仮想の円を置き、その円が別のターゲットや別の小さいターゲットの円と交わらなければ、間隔の例外を使えます。W3Cの例では20×20のターゲットを4px離すと合格し、隙間がないと不合格です。見えるアイコンではなくクリック可能な境界で調べます。
同じページに同等で適合するターゲットがある場合や、ターゲットが文中にある場合、またはターゲットではないテキストの行高によってサイズが制約される場合にも例外があります。作者が大きさを変更していないユーザーエージェントのコントロールと、ターゲットの特定の表現が伝える情報に不可欠または法的に必要な場合も対象です。これはAA適合を判定する条件であり、実装では操作しやすい大きさを優先します。
44はより高いWCAG基準
達成基準2.5.5は44×44 CSS px以上を求めるレベルAAAの基準です。2.5.8と違い、小さいターゲットを間隔だけで合格にする例外はありません。同等の例外では、同じページで同じ機能を果たすターゲット自体が44×44 CSS px以上である必要があります。文やテキストブロック内のターゲット、未変更のユーザーエージェントのコントロール、本質的な表現にも例外があります。
「WCAGは44pxを要求する」はAAA基準だけを指し、「24pxなら常に十分」は例外と実際の使いやすさを見落とします。AA適合を調べるなら2.5.8の24pxと例外を確認し、余裕のある目標には2.5.5の44pxを使えます。CSSピクセルは画面のハードウェアピクセルとも異なります。CSS Valuesは、画面などではユーザーエージェントがピクセル単位を参照ピクセルに合わせることを推奨しています。そのため高解像度画面では1 CSS pxを複数のデバイスピクセルで描く場合があります。
Androidの48dpは別の指針
Android開発者ガイドは、タッチ画面の各操作要素に48×48dp以上のフォーカス可能な領域を推奨しています。同ガイドによると、Composeの多くの標準Materialコンポーネントは、この最小値をすでに適用しています。
WCAGのCSS px基準とAndroidのdp推奨値は、対象の環境と範囲が異なるため、数字だけで優劣を決められません。WebページはWCAGで評価し、ネイティブアプリでは各プラットフォームの指針も使います。プラットフォーム文書は更新されるため、デザインシステムの値には出典と確認日も残しておくと安全です。
実装ではSVG自体を大きくするより、buttonにpaddingや最小サイズを与えてヒット領域を広げます。小さい操作部品が並ぶ場所では実際の境界と間隔を一緒に確認します。自動検査だけでは円の重なりや例外の文脈をすべて判断できないため、狭い画面でのポインター操作も試します。見やすさと押しやすさは別なので、WCAGのコントラスト比も別に確認してください。
参照文書
- WCAG 2.2：達成基準2.5.5、2.5.8
- Understanding SC 2.5.8、Understanding SC 2.5.5
- CSS Values and Units Level 4
- Android accessibility guide
リンクと内容は2026年10月5日に確認しました。