# ターゲットサイズが44×44ピクセルに届かないボタン
Source: https://easeweb.dev/learn/target-size-enhanced
Topics: ボタンとリンク > ボタンやリンクが44×44ピクセル以上である (WCAG 2.5.5)
The fix: すべてのターゲットを44×44 CSSピクセル以上にします。ボタン自体を44ピクセルで描くか、32ピクセルの見た目のまま擬似要素でクリック範囲を44ピクセルに広げ、範囲どうしが重ならない間隔を空けます。
Test with: target measurement, touch, mouse, zoom
References: https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html https://www.w3.org/WAI/WCAG22/Techniques/css/C44 https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html https://developer.apple.com/design/human-interface-guidelines/accessibility https://support.google.com/accessibility/android/answer/7101858 https://developer.mozilla.org/en-US/docs/Web/CSS/::before
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
## 場面
買い物かごに、商品が1行ずつ並んでいます。「リネンのナプキン 数量2」の横に、数量の「−」「＋」と削除の「×」、三つのアイコンボタンが並びます。ボタンは32×32ピクセルで、間隔は4ピクセルです。これは「[ターゲットサイズが足りない、詰まったボタン](/ja/learn/target-size)」のガイドで、同じ行をレベル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ピクセル外側のタップまで受け止めます。揺れるバスの中で親指でタップする人、片手でスマートフォンを持つ人、指の関節や指先の一部でタップする人にも、同じ余裕が役立ちます。
## 自動チェックとAIの限界
axe-coreの `target-size` ルールは、レベルAAの最低限である24ピクセルを基準に測るため、この行を合格にします。2.5.5のためのaxeのルールはありません。この診断ツールは、各コントロールの中心から縦横に外へ向かって、クリックがどこに当たるかを調べてクリック範囲を測るため、擬似要素で広げた範囲も数えます。そのうえで、クリック範囲が縦横とも24ピクセル以上あり、どちらかが44ピクセル未満のコントロールを、種類ごとに一つ、確認が必要な項目として記録します。文中のリンクは除きます。確認が必要な項目にとどめるのは、同じ機能の44ピクセルのコントロールがページのほかの場所にあるかどうかを、人にしか判断できないためです。自動のクリックテストは要素のちょうど中心を押すため、小さなボタンでも外しません。AIがコンポーネントライブラリーで画面を組み立てると、ボタンの大きさもそのまま引き継がれます。shadcn/uiとBootstrapの標準サイズと小さいサイズのボタンは、どれも44ピクセル未満です。
## 修正前：4ピクセル間隔の32ピクセルのボタン
```html
```
```css
.line-actions {
display: flex;
gap: 4px;
}
.line-actions button {
flex-shrink: 0;
min-width: 32px;
min-height: 32px;
padding: 0;
}
```
- 各ターゲットは32×32ピクセルで、縦横とも44ピクセルに12ピクセル足りません。
- ボタンの中心から上下左右に16ピクセルより離れたタップは、ボタンに当たりません。
- 4ピクセルの間隔は役に立ちません。ターゲットの周りの余白は、2.5.5では数えないためです。
## 修正後：ボタンを44ピクセルにする
```html
```
```css
.line-actions {
display: flex;
gap: 8px;
}
.line-actions button {
flex-shrink: 0;
min-width: 44px;
min-height: 44px;
padding: 0;
}
```
1. 各ボタンの `min-width` と `min-height` を44ピクセルにします。見えているボタン全体がクリック範囲なので、どこまで押せるかが分かります。
2. `flex-shrink: 0` はそのまま残し、狭い画面でボタンが44ピクセルより縮むのを防ぎます。
3. 間隔を8ピクセルに広げ、大きくなったボタンが一つの塊に見えないようにします。
これで修正前の例は直り、2.5.5を満たします。2.5.8も同時に満たします。HTMLは変わりません。
## 修正後：ボタンを32ピクセルに見せたまま、クリック範囲を44ピクセルに広げる
```html
```
```css
.line-actions {
display: flex;
gap: 12px;
}
.line-actions button {
position: relative;
flex-shrink: 0;
min-width: 32px;
min-height: 32px;
padding: 0;
}
/* ボタンの一部なので、ここをタップするとボタンが押されます。 */
.line-actions button::before {
content: "";
position: absolute;
inset: -6px;
}
```
1. ボタンに `position: relative` を付け、四方に6ピクセルずつはみ出す `::before` を加えます。見た目は32ピクセルのままですが、クリック範囲は44×44ピクセルになります。擬似要素へのクリックはそのボタンに届きます。
2. 間隔を12ピクセルに広げます。両側に6ピクセルずつ広げた範囲は、隣どうしで接するだけで重ならず、どれも44ピクセルを保てます。
3. `flex-shrink: 0` はそのまま残し、狭い画面でボタンが縮むのを防ぎます。
これで修正前の例は直り、2.5.5を満たします。ただし、広げた範囲が切り取られたり、ほかの要素に覆われたりしない間に限ります。範囲はボタンの上下にも6ピクセル広がるため、買い物かごの行にはボタンの上下に6ピクセル以上の余白が必要です。また、ボタンからその余白までの間にある祖先要素に `overflow: hidden` があると、範囲が切り取られます。
## どの方法を選ぶか
ボタンを44ピクセルにしてください。クリック範囲を広げる方法と同じ効果を、より少ないCSSで実現でき、目に見えない部分が壊れる心配もありません。狙える範囲が利用者の目にも見えます。クリック範囲を広げる方法は、デザインシステムの32ピクセルのボタンを変更できない場合に使います。基準は満たしますが、利用者は32ピクセルの形を狙うことになります。また、範囲が目に見えないため、後で間隔や行の余白を変えたときに、範囲が重なったり切り取られたりしても気付かれにくくなります。ボタンの間隔を広げる方法は、このレベルでは選択肢になりません。
## 実装の判断
測るのはアイコンではなく、CSSピクセルでのクリック範囲です。paddingや擬似要素は含まれ、marginは含まれません。角を丸めたボタンは、丸い縁のとおりにクリックを受け取ります。丸いターゲットをこのレベルでどう測るかはWCAGに書かれていないため、丸いボタンは直径44ピクセルの円にするのではなく、44ピクセル四方のクリック範囲の中に描いてください。
広く使われている二つのコンポーネントライブラリーは、ボタンを二つの基準の間の大きさで描いています。shadcn/uiのアイコンボタンは24〜40ピクセル、Bootstrapのボタンは高さ38ピクセル、`.btn-sm` では31ピクセルです。AppleのデザインガイドラインはiOSとiPadOSの標準のコントロールサイズを44×44ポイントとし、Androidのアクセシビリティガイドは48×48 dp（密度非依存ピクセル）を求めています。`width=device-width` を指定したページなら、スマートフォンのブラウザーでは1ポイントも1 dpもおよそ1 CSSピクセルなので、三つの数値はそのまま比べられます。44ピクセルの最小サイズは、使う場所ごとではなく共通のアイコンボタンに指定し、詰まった行で再び小さくならないようにします。
例外の範囲は狭いものです。文中のリンクは例外ですが、フッターやページ送りのように文の外に並んだリンクは例外になりません。同じ機能の44ピクセルのコントロールが例外の理由になるのは、同じページにあって同じことをする場合だけです。メニューの中に隠れたものを当てにしないでください。ブラウザーが描くコントロールが例外になるのは、作り手が大きさを変えていない場合だけです。
## 修正の確認
1. ブラウザーの開発者ツールで、擬似要素を含めて行のすべてのターゲットを測り、幅と高さを記録する。どれも44ピクセル以上であること。
2. 上下の行のボタンを含むすべての方向で、どのターゲットのクリック範囲もほかと重ならないことを確認する。
3. 実際のスマートフォンで、各ボタンをわざと中心から少し外して指先で何度かタップし、狙ったボタンが毎回実行され、隣のボタンは一度も実行されないことを確認する。
4. 200%に拡大し、ウィンドウ幅を320ピクセルまで狭めても、ターゲットの大きさが保たれ、クリック範囲が重なったり切り取られたりしないことを確認する。
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通のボタンのスタイルを変更した際は、再度確認します。
## 制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。レベルAAAをすべて求められることはまれですが、この基準のように、AAAの達成基準を一つずつ満たすことはできます。このガイドは1行に並んだアイコンボタンを扱っています。グリッド、スライダー、ドラッグ用のつまみは、別に確認が必要です。押しやすい大きさでも、押し間違いを取り消せなければ困ります。それについては「[押した瞬間に実行され、キャンセルできないボタン](/ja/learn/pointer-cancellation)」で説明しています。実際の利用者と端末で確認してください。
---
このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）