WEB ACCESSIBILITY · POINTER TARGETS

CSS Target Size Inspector

見た目は小さく、押せる範囲は大きく。

01

LIVE TARGET MEASUREMENT

押せる範囲と、隣との距離を測る

AA · 24 CSS PX4 FAIL

密集したアイコンボタン。24pxの円が重なる箇所を探します。

CURRENT
targets.local / editorREAL BUTTONS
実際に押せる範囲24px判定円重なりあり
TARGET18 × 18px
GAP2px
NEAREST CENTER20px
RESULTFAIL
02

LEVEL AA · SIZE OR SPACING

24px未満は、間隔で満たす

PASS / SIZE24 × 24px以上

ターゲット内に24×24 CSS pxの四角形を置けます。

PASS / SPACING小さくても、円が重ならない

小さいターゲットの中心に置いた直径24pxの円が交差しません。

FAIL小さく、隣とも近い

直径24pxの判定円が、隣のターゲットまたは判定円と交差します。

03

KEEP THE ICON SMALL

広げるのは、アイコンではなく操作領域

.icon-button {
  --target-size: 24px; /* AA */
  inline-size: var(--target-size);
  block-size: var(--target-size);
  display: grid;
  place-items: center;
}

.target-level-aaa .icon-button {
  --target-size: 44px; /* AAA */
}

.icon-button > svg {
  inline-size: 14px;
  block-size: 14px;
}

見た目のサイズとターゲットサイズを分けると、アイコンの密度を保ったまま、AAの24pxとAAAの44pxを使い分けられます。

04

WCAG 2.2 · POINTER TARGETS

AAは24px、AAAは44px

LEVEL AA

2.5.8 Target Size (Minimum)

24 × 24 CSS px以上、または十分な間隔

24px未満のターゲットは、中心に置いた直径24pxの円が、ほかのターゲットや小さいターゲットの判定円と交差しないように配置します。

W3Cの解説を見る ↗
LEVEL AAA

2.5.5 Target Size (Enhanced)

44 × 44 CSS px以上

AAAには、AAのような間隔による例外はありません。対象となるターゲット自体に44×44 CSS px以上の大きさが必要です。

W3Cの解説を見る ↗
共通する主な例外

Equivalent 同じ機能を持つ十分な大きさの別コントロールがある、Inline 文またはテキストブロック内にある、User Agent Control サイズをブラウザが決め作者が変更していない、Essential その配置や大きさが情報表現に不可欠である場合です。

基準は、AAとAAAで異なります。

WCAG 2.2のTarget Size (Minimum・レベルAA)は原則24×24 CSS px以上、または十分な間隔を求めます。Target Size (Enhanced・レベルAAA)は原則44×44 CSS px以上で、間隔による例外はありません。文章中のリンク、同じ機能を持つ別のコントロール、ブラウザが決める標準UI、表現上不可欠な配置などには例外があります。

このInspectorは、同じ大きさの矩形ボタンを使ってサイズと間隔の考え方を学ぶためのものです。複雑な形、重なり、インラインリンク、例外適用を含む適合判定を自動化するものではありません。