ターゲットのサイズ(最低限)とは — WCAG 2.2 達成基準2.5.8の24×24px基準と5つの例外

「ターゲットサイズ 24px」「ボタン サイズ アクセシビリティ 基準」を調べると必ず出てくるのが、WCAG 2.2で新設された達成基準2.5.8「ターゲットのサイズ(最低限)」です。合言葉のように語られる「24px」ですが、正確にはどんな図形で判定するのか、そして24px未満でも合格になる5つの例外があることは意外と知られていません。この記事では、達成基準2.5.8の規範条文をWAIC(ウェブアクセシビリティ基盤委員会)公式訳で確認しながら、24×24 CSSピクセルの正確な定義、5つの例外、そして混同されやすい44×44px基準(達成基準2.5.5)との違いを整理します。実際の数値を入れて判定したい場合は、後述のターゲットサイズチェッカーもあわせてご利用ください。

①達成基準2.5.8とは — レベルAAで新設された「ターゲットのサイズ」の基準

達成基準2.5.8「ターゲットのサイズ(最低限)」(英語名: Target Size (Minimum))は、WCAG 2.2で新たに追加された達成基準の一つで、適合レベルはAAです。多くの組織がWCAG適合の目標水準として採用するのがレベルAAであるため、2.5.8は実務上かなり重要度の高い基準といえます。WCAG 2.2 勧告本文(W3C、2024年12月12日付)は、この基準の規範条文を次のように定めています(WAIC公式訳)。

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

出典: WCAG 2.2 本文 達成基準2.5.8(WAIC訳)

続く「ただし、次の場合は除く」という部分が、この記事の③で解説する5つの例外(間隔・同等・インライン・ユーザエージェントによる制御・必要不可欠)です。つまり2.5.8は「原則として24×24pxが必要だが、5つの例外のいずれかに該当すれば24px未満でもよい」という構造になっています。この点を見落として「24pxちょうどでなければすべてアウト」と誤解されるケースが少なくないため、まずは基準全体の構造から理解しておくことが大切です。

②「24×24 CSSピクセル」の正確な意味 — 内接する軸整列正方形で判定する

「24×24 CSSピクセル」というと、ターゲットの幅と高さを定規で測るだけのようにも聞こえますが、Understanding文書(W3C・WAIC訳とも確認済み)は判定方法をより厳密に定義しています。

「ターゲットを『少なくとも 24 × 24 CSS ピクセル』にするためには、正方形が完全にターゲットの内部に収まるように (ターゲットの領域外に広がらないように) 水平軸及び垂直軸に向きを揃えて、24 × 24 CSS ピクセルの実線の正方形を描画できなければならない。」

出典: Understanding SC 2.5.8 Target Size (Minimum)(WAIC訳)

つまり判定の本質は「幅×高さ」の単純な掛け算ではなく、「ページの水平軸・垂直軸に平行な24×24pxの正方形が、そのターゲットの内部にすっぽり収まるかどうか」です。ターゲット自体が円形や斜めの形状であっても、内側に描く正方形自体は軸に平行でなければなりません。この正方形を内部に描けないターゲットは「小さい(undersized)」ターゲットと呼ばれ、サイズ要件そのものには不合格となります(ただし次章の間隔例外により、達成基準全体としては合格しうる)。また、この要件はページのズーム率に依存しないため、「ズームすれば十分な間隔になる」という主張は要件を満たしたことにはなりません。ドロップダウンやモーダル、クッキーバナーなど一時的な操作結果として表示され、他の要素に隠れている間のターゲットには、そもそもこの要件が適用されない点にも注意してください。

③5つの例外 — 間隔・同等・インライン・ユーザエージェントによる制御・必要不可欠

24×24pxの正方形を内部に描けない「小さいターゲット」でも、次の5つの例外のいずれかに該当すれば達成基準2.5.8を満たす可能性があります。

間隔(Spacing)例外

実務で使う頻度が最も高い例外です。判定方法は、小さなターゲットの境界ボックス(矩形なら自身と同じ)の中心に、直径24 CSSピクセル(半径12px)の円を仮想的に描き、その円が他のターゲットや他の小さなターゲットの円と重ならなければ合格、というものです。Understanding文書には具体的な作図例が示されています。たとえば、20×20pxのアイコンボタンを6個横並びにし、隙間を4pxあける場合、ボタンの中心間距離は20px+4px=24pxとなり、それぞれ半径12pxの円がちょうど接する(重ならない)ため、間隔例外を満たします(合格)。一方、同じ20×20pxのボタンを隙間0pxで隙間なく並べると、中心間距離は20pxとなり24pxを下回るため、円同士が重なり合格しません。「見た目にはそこそこ離れているつもり」でも、中心間距離が24px未満なら間隔例外は成立しないという点が、実務上つまずきやすいポイントです。

同等(Equivalent)例外

対象のターゲット自体は24×24pxを満たさなくても、同一ページ内に同じ機能を果たす別のコントロールがあり、そのコントロールが達成基準2.5.8を満たしていれば、対象のターゲットは例外として扱われます。たとえば、小さなアイコンだけのボタンの近くに、同じ操作を実行できる24×24px以上のテキストリンクが別途用意されているケースなどが該当します。

インライン(Inline)例外

ターゲットが文章の中に存在する場合や、そのサイズが周囲のテキストの行の高さによって制約されている場合に適用される例外です。段落中の本文リンクは、ビューポート幅によって折り返し位置や周囲のリンクとの位置関係が変化するため、逐一24×24pxや間隔要件を課すと不自然なデザインを強いることになるための例外です。

ユーザエージェントによる制御例外

ターゲットのサイズがブラウザなどのユーザエージェントによって決定されており、著者(コンテンツ制作者)がそれを変更していない場合に適用される例外です。典型例は<input type="date">が表示するブラウザ標準のカレンダーUIです。著者がCSSなどでサイズを上書きしている場合は、この例外は適用されません。

必要不可欠(Essential)例外

ターゲットを特定の方法で提示すること自体が、伝達する情報にとって必要不可欠、あるいは法的に要求されている場合の例外です。たとえば、デジタル地図上のピンマーカーのように、位置情報そのものが意味を持つため密集を避けられないケースなどが該当します。ただし、この例外に該当する場合でも、実用的な範囲で代替手段を用意することが強く推奨されています。

④44×44px(達成基準2.5.5「ターゲットのサイズ(拡張)」)との違い

「ターゲットサイズ」を調べると、24pxではなく44pxという数字を見かけることもあります。これは達成基準2.5.8ではなく、別の達成基準である2.5.5「ターゲットのサイズ(拡張)」の数値です。2.5.5は適合レベルAAA(WCAGの中で最も要求が厳しい水準)に位置づけられており、レベルAAである2.5.8(24×24px)よりも上位の、より望ましい水準を示すものです。同じ「ターゲットのサイズ」という名前を持つ基準が2つ存在し、片方はAA・24px、もう片方はAAA・44pxという関係になっているため、記事や解説を読む際にどちらの基準について書かれているのかを混同しないよう注意してください。多くの適合方針(公的機関の調達要件など)ではレベルAAまでの達成が目標とされることが多く、その場合に必須となるのは2.5.8(24px)の方です。44pxを満たせばより望ましいものの、AA準拠を目標とする場合は、まず24×24pxと5つの例外の理解が優先されます。

⑤実務での確認方法 — 数値を入れるだけで簡易判定

実際のデザインやコードで達成基準2.5.8を確認する際は、(1)ターゲットの幅・高さが24×24pxの正方形を内包できるか、(2)できない場合は隣接するターゲットとの中心間距離が24px以上あるか(間隔例外)、(3)それでも満たさない場合は他の4つの例外に該当しないか、という順で確認していくのが実務的な進め方です。ただし、間隔例外の中心間距離の計算や境界ボックスの求め方は、手計算だとミスをしやすいポイントです。当サイトのターゲットサイズチェッカーでは、ターゲットの幅・高さ・隣接ターゲットとの間隔を入力するだけで、24×24px基準と間隔(Spacing)例外を実寸プレビュー付きで簡易判定できます。同等・インライン・ユーザエージェントによる制御・必要不可欠の4つの例外は数値だけでは自動判定できないため、チェックリスト形式で確認ポイントを提示しています。あわせて、フォーカスリングの面積とコントラストを扱うフォーカスの外観(達成基準2.4.13)の解説記事も、キーボード操作のアクセシビリティを確認するうえで参考になります。

よくある質問

この記事を引用する場合

本記事の内容を引用・紹介いただく場合は、記事名「ターゲットのサイズ(最低限)とは」と情報確認日「2026年7月22日」をあわせてお示しください。当サイトへのリンクは任意です(リンクいただける場合は https://www.conbu.jp/tool/wcag/article-target-size.html をご利用ください)。

変更履歴

• 2026-07-22: 初版公開