この記事でわかること

  • ボタンやリンクの押せる範囲について、W3CのWCAGが決めている大きさの基準
  • 24px四方に足りないときに、間隔で基準を満たす考え方
  • 基準の対象にならない場合(文の中のリンクなど)
  • 作ったページで大きさと間隔を確かめる手順

スマートフォンで小さなボタンを押そうとして、隣のボタンを押してしまったことはないでしょうか。押す場所が小さいと、手が震える人や、揺れる電車の中で操作する人には、さらに押しにくくなります。この記事では、ボタンやリンクの押しやすい大きさを、W3Cのアクセシビリティの基準であるWCAGをもとに決める方法を紹介します。

内容は、WCAG 2.2と、その解説(Understanding)のページ、W3Cの技法のページを2026年10月24日に読んで確かめたものです。特定のツールやスクールは紹介せず、法律上の決まりについても書きません。

先に結論: 押せる範囲を24px四方以上にする

先に結論を書くと、ボタンやリンクの押せる範囲は24×24 CSSピクセル以上にし、足りない部品は周りに間隔をとります。よく使うボタンや大事なボタンは、44×44 CSSピクセルを目安にします。 確かめることをまとめると、次のとおりです。

確かめること 目安
最低限の大きさ 24px四方
足りないとき 間隔をとる
高い目安 44px四方
文の中のリンク 対象外
拡大した状態 使わない

WCAGの2つの基準

WCAG 2.2には、押せる範囲の大きさについて2つの達成基準があります。

  • 達成基準2.5.8(Target Size (Minimum)、レベルAA): マウスや指などで押す範囲を、24×24 CSSピクセル以上にする。足りないときは、例外の条件を満たす
  • 達成基準2.5.5(Target Size (Enhanced)、レベルAAA): 押す範囲を、44×44 CSSピクセル以上にする

WCAGでいう押せる範囲(ターゲット)は、マウス・ペン・指などの操作を受け付ける画面の範囲です。CSSピクセルは、CSSで長さを決めるときの基本の単位で、画面の実際の画素の数とは別のものです。

達成基準2.5.8の解説では、目的は、隣の部品をうっかり押さずに、押したいものを押せるようにすることだとしています。また、大事なリンクやボタンは、より厳しい2.5.5の目安を目指すことを勧めています。2.5.5の解説では、よく使う部品、押した結果を取り消しにくい部品、画面の端など手が届きにくい場所の部品は、さらに大きくするのがよいとしています。

24pxに足りないときは間隔で満たす

24×24 CSSピクセルに足りない部品も、周りに十分な間隔があれば、達成基準2.5.8を満たします。確かめ方は、足りない部品の中心に、直径24 CSSピクセルの円を描くと考えます。その円が、ほかの部品にも、ほかの小さな部品の円にも重ならなければ、基準を満たします。

W3Cの解説の例では、20×20 CSSピクセルのアイコンのボタンを4 CSSピクセルずつ空けて並べると基準を満たし、隙間なく並べると円が重なるため満たさないとしています。メニューの項目の例では、文字と余白を合わせた高さが24 CSSピクセルなら基準を満たし、18 CSSピクセルしかないと満たさないとしています。

基準の対象にならない場合

達成基準2.5.8には、24×24 CSSピクセルに足りなくてもよい場合が5つあります。

  1. 間隔: 上で説明した、直径24 CSSピクセルの円が重ならない場合
  2. 同じ働きの部品: 同じページに、同じことができる、基準を満たす別の部品がある場合
  3. 文の中: 文の中にあるリンクなど、まわりの文字の行の高さで大きさが決まる場合
  4. ブラウザの部品: 大きさをブラウザが決めていて、作る人が変えていない場合
  5. 欠かせない見せ方: 地図の上のピンのように、その位置や大きさ自体が伝える情報に欠かせない場合

文の中のリンクが対象外なのは、W3Cの解説によると、画面の幅で文が折り返されると、リンクの位置が変わり、作る人が並び方を予測できないためです。文章では、リンクを大きくするより、読みやすい行の高さにすることの方が大切だとしています。行の高さの決め方は、Webデザインで文字の大きさと行間を決める方法で紹介しています。

拡大した状態では確かめない

W3Cの解説では、この基準はページの拡大の倍率とは関係がないとしています。利用者がページを拡大しても、部品のCSSピクセルでの大きさは変わらないため、「拡大すれば大きくなる」ことを理由に基準を満たしたとは言えません。

また、ボタンを押して開いた画面や、ページを開いた後に出る案内の表示などで隠れている間の部品は、基準の対象外です。ただし、新しく上に重なって出てきた内容の部品は、対象になります。

手順: 押せる範囲を測って広げる

確かめるときは、次の順で進めます。

  1. 押せる部品を書き出す: ボタン、アイコンだけのリンク、メニューの項目、ページ送りの番号など、押す部品を書き出します
  2. 大きさを測る: ブラウザの開発者ツールなどで、拡大していない状態の押せる範囲の幅と高さを見ます。角を丸くした部品は、24×24 CSSピクセルの四角が中に収まるかを見ます
  3. 足りない部品の間隔を見る: 24 CSSピクセルに足りない部品は、中心に直径24 CSSピクセルの円を描いたときに、隣の部品やその円に重ならないかを見ます
  4. 足りない所を直す: 押せる範囲を広げるか、隣との間隔を空けてから、もう一度測ります

W3Cの技法(C42)では、ページ送りの小さなリンクを、幅と高さの最小値を24 CSSピクセルにした入れ物の中央に置き、隣どうしの間隔を確保する例が示されています。次のCSSは、押せる範囲の最小の大きさを決める見本です。自分のサイトのCSSを書くときの参考にするもので、どこかで実行するコマンドではありません。既にあるサイトのCSSを直すときは、直す前のファイルを控えてから変え、表示を確かめます。

/* 見本: 押せる範囲の最小の大きさを決める(クラス名は自分のサイトに合わせる) */
.icon-button {
  min-width: 24px;   /* 達成基準2.5.8の最低限 */
  min-height: 24px;
}
.main-button {
  min-width: 44px;   /* 大事なボタンは2.5.5の目安 */
  min-height: 44px;
}

自分で直すか、相談するかの判断

迷ったときは、「CSSで押せる範囲か間隔を広げるだけで、ほかの配置が崩れないか」で決めます。最小の幅と高さを足す、余白を広げる、といった直し方で済むなら、自分で直して、もう一度同じ手順で測ります。

アイコンが密に並んだ画面のように、広げると全体の配置を考え直す必要がある場合は、どの部品を残し、どれをまとめるかを決める必要があります。測った大きさの一覧を持って、デザインを決めた人や、Webデザインを教えている人に相談します。作品集で見せる場合の説明の書き方は、未経験からWebデザインのポートフォリオを作る手順で紹介しています。

つまずきやすいところ

  • 角を丸くして小さくなる: W3Cの解説では、角の丸みで24×24 CSSピクセルの四角が中に入らない部品は、足りない部品として扱い、間隔で確かめるとしています
  • 見た目だけで測る: 押せる範囲は、目に見える形ではなく、操作を受け付ける範囲です。アイコンの周りの余白も押せる範囲に入っているかを、実際の要素の大きさで確かめます
  • 重なった部分を数える: WCAGの注記では、押せる範囲が重なっている部分は、同じ働きをする場合を除き、大きさに数えないとしています
  • 色の差を見落とす: 大きさが足りていても、ボタンの枠や文字が背景と見分けにくいと押しにくくなります。確かめ方は、Webデザインで文字と背景のコントラストを確かめる方法で紹介しています

まとめ

  • WCAG 2.2の達成基準2.5.8では、ボタンやリンクの押せる範囲を24×24 CSSピクセル以上にします
  • 足りない部品は、中心に描いた直径24 CSSピクセルの円が隣と重ならないように間隔をとります
  • 文の中のリンクやブラウザの部品などは対象外で、拡大した状態では確かめません
  • よく使うボタンや大事なボタンは、達成基準2.5.5の44×44 CSSピクセルを目安にします