2.5.8ターゲットのサイズ（最小）

ターゲットサイズがなぜ大事なの？

スマートフォンやタブレットでは指でボタンを押すため、ボタンが小さいと隣を誤って押してしまいます。 手が震える人、運動機能に障害がある人、大きな指の人にとっては特に深刻です。 マウス操作でも、16px 程度の極小アイコンボタン（削除・編集など）を正確にクリックするのは難しくなります。

WCAG 2.2 で新設されたこの基準は、ポインタで操作できる対象を原則 24×24 CSS ピクセル以上にすることを求めます。 24px に届かない場合でも、隣の対象と十分な間隔（各対象を中心とする直径 24px の円が重ならない）があれば達成できます。

不合格の例（小さく密集）

下のボタン群を実際に押してみてください。 16px の極小ボタンが 2px の隙間で並んでいます。 共有・編集・削除を正確に押し分けるのは困難です。

合格の例（24px以上・十分な間隔）

同じ機能のボタンを 44×44px（最小要件 24px の倍近い推奨サイズ）にし、間隔も 8px 空けています。 押しやすさの違いを体感してください。

直し方（コード）

/* ✅ 推奨：タップしやすい 44×44px（最小要件は 24×24px） */
.icon-btn-group {
  display: flex;
  gap: 8px;          /* 隣接するオフセットエリアが重ならない間隔を確保 */
  flex-wrap: wrap;
  align-items: center;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;   /* 最小要件は 24px。推奨は 44px（iOS HIG / Material Design 準拠） */
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text);
  cursor: pointer;
}

/* フォーカスリングを消さない */
.icon-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ❌ 違反例：16px は最小要件 24px を下回る */
.icon-btn-group-bad {
  display: flex;
  gap: 2px;          /* ほぼ隙間なし → 間隔による例外も満たさない */
}

.icon-btn-tiny {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;       /* 24px 未満 → WCAG 2.5.8 違反 */
  height: 16px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-subtle);
  color: var(--text);
  cursor: pointer;
}

例外と間隔の考え方

以下の場合は 2.5.8 の対象外です：

• インライン本文中のリンク —— 「こちらをご覧ください」のように段落の文章中に溶け込むリンクは免除。 行の高さが自然なターゲット領域になるため。
• ブラウザ / OS のデフォルト UI そのまま ——<select> や <input type="file"> など、著者側でスタイルを変更していないネイティブ UI。
• 必要不可欠な場合 —— サイズが情報として本質的な意味を持つもの（例: 地図上のランドマークを示す 1px のピン位置）。
• 同じページ上に代替操作がある場合 —— 小さいボタンと同等の機能を持つ、より大きい別の操作手段が同一ページ内に存在する場合。

チェックリスト

• ポインタ操作できる全要素（ボタン・リンク・カスタム UI）が 24×24px 以上、または間隔の条件を満たしている
• アイコンボタンなど小さくなりやすい要素に min-width / min-height: 24px（推奨 44px）を指定している
• ボタン群の gap または margin が、隣接するオフセットエリアが重ならない値になっている
• インラインリンク・OS ネイティブ UI・必要不可欠なケース以外には例外を適用していない
• アイコンのみのボタンに aria-label（または同等の代替テキスト）が付いている
• フォーカスリングを消していない（outline: none 禁止）
• アイコン色と背景色のコントラスト比が 3:1 以上（WCAG 1.4.11 非テキストのコントラスト）
• DevTools のヒットテストや実機でクリック / タップ領域を実測して確認した