タグ: WCAG 2.2

画面の小さなボタンを押そうとして、隣の操作を選んでしまう。こうした誤操作を減らすには、アイコンを見やすくするだけでなく、実際に反応する範囲と、その周りの余白を考える必要があります。指先でのタッチに限らず、マウスやペンで細かい位置を狙うときにも関わる設計です。

ウェブのアクセシビリティ指針であるWCAG 2.2には、この範囲を評価する「ターゲットサイズ」の達成基準があります。よく見かける24ピクセルと44ピクセルは、同じ基準の言い換えではありません。何を測り、どこまで判断できる数字なのかを、ボタンの配置例から整理します。^[1]

簡単にまとめると？

• 測るのはアイコンの絵ではなく、クリックやタップを受け付ける領域です。CSSピクセルは、画面を構成する物理的な画素とは別の単位です。
• レベルAAの達成基準2.5.8では、原則24×24 CSSピクセル以上。小さいターゲットでも、所定の間隔などの例外条件を満たせば、この基準を満たせます。
• 44×44 CSSピクセルは、より高いレベルAAAの別の達成基準です。最低条件への適合と、使う人にとっての操作しやすさは分けて確かめます。

アイコンの外側も反応するなら、そこまでがターゲット

WCAGでいうターゲットは、画面上でポインター操作を受け付ける領域です。たとえば、中央に16×16の絵があり、その周囲を含む32×32 CSSピクセルの正方形全体が同じボタンとして反応するなら、評価する大きさは32×32です。絵の外側が単なる背景で、押しても何も起きないなら、その余白はターゲットに含められません。これは定義に基づく説明例で、特定の製品を測定した結果ではありません。^[1]

ここでのCSSピクセルは、ウェブのレイアウトで使う単位です。高密度のディスプレーの物理的な画素数を、そのまま24や44と比較するものではありません。また、利用者がページを拡大すれば見た目は大きくなりますが、それを前提に元のターゲットサイズの不足を解消したことにはできません。^[1][2]

24×24の大きさか、隣と取り違えにくい間隔か

レベルAAの達成基準2.5.8「Target Size (Minimum)」は、原則としてターゲットに24×24 CSSピクセル以上の大きさを求めています。W3Cの解説では、画面の横軸・縦軸に沿った24×24の正方形が、操作できる領域の中に収まるかで考えます。丸や角の丸い形では、外接する四角の幅と高さだけを見て済ませない点にも注意が必要です。^[1][2]

それより小さいターゲットには、間隔による例外があります。まず、横軸・縦軸に沿ってターゲットを囲む最小の長方形、つまりバウンディングボックスの中心に、直径24 CSSピクセルの仮想の円を置きます。近くの小さなターゲットにも同じ円を置き、他のターゲットや他の円と重ならないかを調べます。円は評価のための目印であって、実際の反応領域を円形に広げる指示ではありません。^[1][2]

下のW3Cの図は、同じ種類のボタンを三通りに配置した例です。上段は各ターゲットが24×24で、大きさの条件を満たします。中段は20×20ですが、間に4 CSSピクセルの余白があります。隣どうしの中心間は20＋4＝24となり、間隔の例外を満たします。下段は20×20を隙間なく並べたため、直径24の円が重なり、この例外を満たしません。^[2]

ただし、「ボタンの間には常に4ピクセルあればよい」という規則ではありません。4は、この20×20の正方形を一列に並べた例から出てくる値です。上下にも別のボタンがあれば、そちらとの重なりも確認します。相手が大きなターゲットなら、小さなターゲットに置いた円と、その大きな領域自体の重なりを調べます。^[2]

44ピクセルは、間隔の代わりではなく別の基準

44×44 CSSピクセルは、レベルAAAの達成基準2.5.5「Target Size (Enhanced)」に登場します。こちらにも文章中のリンクなどの例外はありますが、2.5.8と同じ「間隔」の例外はありません。20×20のボタンを離して配置し、2.5.8を満たせたからといって、2.5.5も満たしたとはいえません。^[1][3]

また、この二つはWCAG全体の一部です。2.5.8を満たすだけで、そのページ全体がレベルAAに適合したことにはなりません。レベルAAには、レベルAとAAのすべての達成基準など、適合のための要件を満たす必要があります。^[1]

文章中のリンクを、すべてボタンに広げる必要はない

2.5.8には、間隔以外にも四つの例外があります。同じページに条件を満たす別の操作手段がある場合、文章内や非ターゲット文字の行高に制約される場合、ブラウザー等が決めた大きさを作者が変えていない場合、特定の表示が情報を伝えるうえで不可欠、または法令で必要とされる場合です。例外ごとに条件が異なるので、見た目が小さいことだけで一律に不合格にはできません。^[1][2]

たとえば文の途中のリンクは、画面幅に応じた折り返しと文章の読みやすさを保つ必要があります。一方、独立した操作ボタンまで、文字が載っているというだけで文章内リンクの例外にできるわけではありません。先に「これはどんな操作領域か」を確かめることが、寸法の測定と同じくらい大切になります。^[2][3]

最低条件を確認した後に、使う場面を確かめる

設計や点検では、まず実際に反応する領域を確かめ、次に大きさ、必要なら隣との間隔や例外を確認すると、判断の根拠を残しやすくなります。小さなアイコンの印象だけで決めず、領域を広げる、配置を離す、重要な操作を大きくする、といった変更を区別して検討できます。

それでも、周囲に何もない極小のターゲットは、間隔の例外を満たしながら狙いにくいことがあります。W3Cの解説もこの限界を示し、間隔によらず最低限の大きさを確保することや、重要な操作でより厳しい基準を目指すことを勧めています。頻繁に使う操作、取り消しにくい操作、届きにくい位置などは、利用する人と状況を踏まえて大きさを決める材料になります。^[2][3]

この記事は仕様と公式解説の読み方を扱っており、利用者テストや誤操作率の測定は行っていません。数値は点検の出発点です。基準への適合確認と、実際の利用場面で無理なく操作できるかの確認を、両方持つことが役立ちます。

参考資料

1. W3C, Web Content Accessibility Guidelines (WCAG) 2.2、W3C Recommendation、2024年12月12日版。達成基準2.5.8・2.5.5、用語「target」「CSS pixel」、適合要件5.2.1を参照。
2. W3C WAI, Understanding SC 2.5.8: Target Size (Minimum)。2026年5月11日更新表示、2026年10月14日確認。規範そのものではない解説資料。大きさ・間隔の説明、Figure 3〜5と周辺の配置例を参照。
3. W3C WAI, Understanding SC 2.5.5: Target Size (Enhanced)。2026年10月14日確認。44 CSSピクセルの条件、例外、使う場面に応じた配慮を参照。
4. 原図の利用条件：W3C Software and Document License — 2023 version。
   
   原図の著作権表示と利用条件全文

   This article includes Figure 5 copied from Understanding SC 2.5.8: Target Size (Minimum). Copyright © 2026 World Wide Web Consortium. All Rights Reserved. SVG converted to PNG and displayed at a different scale; no diagram content changed or cropped. This work is distributed under the W3C Software and Document License in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

   W3C liability and trademark notices apply.

   This work is being provided by the copyright holders under the following license.

   License

   By obtaining and/or copying this work, you (the licensee) agree that you have read, understood, and will comply with the following terms and conditions.

   Permission to copy, modify, and distribute this work, with or without modification, for any purpose and without fee or royalty is hereby granted, provided that you include the following on ALL copies of the work or portions thereof, including modifications:

   • The full text of this NOTICE in a location viewable to users of the redistributed or derivative work.
   • Any pre-existing intellectual property disclaimers, notices, or terms and conditions. If none exist, the W3C software and document short notice should be included.
   • Notice of any changes or modifications, through a copyright statement on the new code or document such as “This software or document includes material copied from or derived from [title and URI of the W3C document]. Copyright © [$year-of-document] World Wide Web Consortium. https://www.w3.org/copyright/software-license-2023/“

   Disclaimers

   THIS WORK IS PROVIDED “AS IS,” AND COPYRIGHT HOLDERS MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO, WARRANTIES OF MERCHANTABILITY OR FITNESS FOR ANY PARTICULAR PURPOSE OR THAT THE USE OF THE SOFTWARE OR DOCUMENT WILL NOT INFRINGE ANY THIRD PARTY PATENTS, COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS.

   COPYRIGHT HOLDERS WILL NOT BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF ANY USE OF THE SOFTWARE OR DOCUMENT.

   The name and trademarks of copyright holders may NOT be used in advertising or publicity pertaining to the work without specific, written prior permission. Title to copyright in this work will at all times remain with copyright holders.