WCAG 2.2の達成基準2.5.8「ターゲットサイズ（最小）」は、ボタンやリンクなどを誤って押す可能性を減らすため、ポインター入力用のターゲットに大きさまたは周囲の間隔を求めるLevel AAの基準です。
基本となる大きさは24×24 CSSピクセルですが、すべてのターゲットを一律に24×24 CSSピクセル以上にする規定ではなく、5つの例外があります。
ターゲットとは、マウス、タッチ、ペンなどで操作を受け付ける領域です。
CSSピクセルはCSSで使うpx単位であり、端末の物理的な画素を直接数えるものではありません。
WCAG 2.2で追加された達成基準の全体像を先に確認すると、2.5.8の位置付けを把握しやすくなります。
達成基準2.5.8が求めること
| 項目 | 内容 |
|---|---|
| 適合レベル | Level AA |
| 対象 | ポインター入力で操作するターゲット |
| 基本の大きさ | 24×24 CSSピクセル以上 |
| 基本の考え方 | 所定の大きさを満たすか、5つの例外のいずれかに該当すること |
大きさで適合させる場合は、ターゲットの内側に、ページの縦横軸に沿った24×24 CSSピクセルの正方形が収まる必要があります。
そのため、幅と高さの数値だけでなく、角丸や傾きも含めた実際の操作領域を確認します。
規格本文はW3Cの達成基準2.5.8、意図と具体例はUnderstanding SC 2.5.8で確認できます。
24×24 CSSピクセル未満でも適合し得る5つの例外
例外は「小さくても構わない」という免除ではありません。
ターゲットが24×24 CSSピクセル未満なら、次のいずれかに該当する根拠を確認します。
- 間隔：小さいターゲットの境界ボックス中央に直径24 CSSピクセルの円を置いたとき、その円が別のターゲットや別の小さいターゲットに置いた円と重ならない。
- 同等：同じページに、同じ機能を実行でき、この達成基準を満たす別のコントロールがある。
- インライン：ターゲットが文中にあるか、ターゲットではない周囲のテキストの行の高さによって大きさが制約される。
- ユーザーエージェントのコントロール：ブラウザなどがターゲットの大きさを決めており、制作者が変更していない。
- 本質的：その大きさや見せ方が情報の伝達に欠かせないか、法的に必要とされる。
「デザイン上のスペースを確保しにくい」だけでは例外になりません。
小さいターゲットを残す場合は、どの例外で適合を判断したかをレビュー記録に残すと、改修後の再確認がしやすくなります。
実装では大きさを先に確保する
通常のボタンや独立したリンクは、例外の成立に頼るより、操作領域そのものを24×24 CSSピクセル以上にするほうが確認しやすくなります。
ボタンの最小サイズをCSSで指定する
共通のコンポーネントにmin-widthとmin-heightを設定すると、ラベルが短い場合でも最小サイズを保てます。
<button class="action-button" type="button">送信</button>.action-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
padding: 8px 12px;
}画面に見えるアイコンの大きさではなく、実際にクリックやタップへ反応する領域を測ります。
アイコンを大きく見せなくても、ボタン要素の余白を増やせば操作領域を広げられます。
間隔は最終レイアウトで測る
隣り合う要素の間隔は、gapやmarginで確保できます。
ただし、「余白を一律に何ピクセル付ければ適合する」とは限らず、ターゲット自体の寸法と隣接するターゲットの位置を含めて、例外の円が重ならないかを確認する必要があります。
折り返しによって上下の行が近づくこともあるため、狭い画面幅を含む実際の表示で測ります。
インラインリンクへ一律の余白を付けない
文中のリンクはインラインの例外に該当し得ます。
すべてのa要素へ一律のpaddingを追加すると、行間や折り返しが崩れる場合があるため、独立した操作として見せたいリンクだけをボタン状にするなど、文脈に応じて設計します。
例外に該当しても、リンクの文字が判別しやすく、目的がわかる表現になっているかは別途確認します。
モバイルだけに限定しない
この達成基準はタッチ操作だけを対象にしたものではないため、基本の最小サイズは特定の画面幅に限定せず設定します。
小さい画面でさらに大きくする場合は、メディアクエリを追加しても構いませんが、デスクトップ表示のマウスやペン操作でも押しやすい状態を保ちます。
よくある誤り
- 24×24 CSSピクセルを「すべてのターゲットに例外なく必要」と説明する。
- アイコンの見た目だけを測り、周囲を含む実際の操作領域を確認しない。
- 小さいターゲットに任意の余白を付けただけで、間隔の例外を満たしたと判断する。
- 文中リンクの例外を、すべてのテキストリンクに対する無条件の免除として扱う。
- 自動検査で指摘が出なかったことだけを根拠に、適合と判断する。
手動テストの手順
- リンク、ボタン、フォームコントロール、アイコンボタンなど、ポインターで操作できる対象を一覧にする。
- ブラウザの開発者ツールなどで、各ターゲットの実際の操作領域をCSSピクセル単位で確認する。
- 24×24 CSSピクセルの正方形が収まらないターゲットには、5つの例外のどれを適用するかを確認する。
- 間隔の例外を使う場合は、直径24 CSSピクセルの円が隣のターゲットや円と重ならないことを確かめる。
- 画面幅の変更、テキストの折り返し、メニューやダイアログの表示後にも配置を確認する。
- 可能であれば、マウス、タッチ、ペンなど実際の入力手段で誤操作が起きにくいかを試す。
自動検査は対象候補を見つける補助になりますが、例外の成立や実際の操作性まで一律に判断できるとは限りません。
自動検査の結果と手動確認を組み合わせます。
より押しやすい大きさを検討する
24×24 CSSピクセルはLevel AAの最低条件であり、使いやすさの上限ではありません。
重要な操作や頻繁に使う操作では、レイアウトに無理のない範囲で、より大きなターゲットを検討できます。
Level AAAの達成基準との違いは、2.5.5「ターゲットサイズ（強化）」の実装とテストで確認できます。
実装時のチェックリスト
- 独立したボタンやリンクの操作領域は24×24 CSSピクセル以上か。
- 小さいターゲットには、5つの例外のいずれかを適用できるか。
- 間隔の例外は、ターゲットが折り返した状態でも成立するか。
- アイコンではなく、反応する領域を測っているか。
- 自動検査だけでなく、手動で確認したか。
当社では、Webアクセシビリティ対応を支援するUUU ウェブアクセシビリティを提供しています。
既存サイトの課題確認や改善に関心がある方は、サービスの詳細をご覧ください。