2.5.5 ターゲットのサイズ (高度)

要件

マウスやタッチ操作などで操作するすべてのターゲットは、少なくとも 44×44 CSS ピクセルのサイズでなければならない。
ただし、以下の例外を除く。

適用対象と例外

適用される対象（操作可能な要素）

• ボタン
• リンク（テキストやアイコン）
• チェックボックスやラジオボタン
• カスタムコントロール（スライダー、トグルなど）

例外（以下に該当する場合は除外される）

例外カテゴリ	内容
同時に表示される他のターゲットと距離がある場合	44×44 未満でも周囲に十分な余白がある場合
ターゲットのサイズがユーザーによって調整可能な場合	例：設定で拡大可能な UI など
HTMLのセマンティック要素内のテキストリンクなど、制作者がコントロールできない場合	例：ユーザー生成コンテンツの中のリンクなど
ターゲットを視覚的に縮小しても、CSS上で44×44の当たり判定（ヒットエリア）がある場合	実際の見た目よりも広いヒットエリアが設定されていればOK

目的

• 誤操作を防ぐ（特にスマートフォンやタブレットでありがちな「押し間違い」）
• 手の動きや視力に制約のある人にも正確に操作できるようにする
• ユーザビリティ全体の向上（高齢者や小さなデバイス利用者にも有効）

良い例

ケース	内容
アイコンボタンが 44×44px 以上のクリックエリアを持つ	直接触れる領域が十分でOK
テキストリンクは 14px でも、周囲にパディングがあり、合計 44px 以上ある	当たり判定として十分
メニュー項目が一覧表示され、各行が 50px 高さでタップ領域も明確	モバイルUIでも操作しやすい

悪い例

ケース	問題点
テキストリンクが小さく、パディングやマージンがない	誤クリックや操作しにくさが発生
複数のアイコンが密集し、44px どころか 20px 程度しかない	隣のアイコンを誤って押す可能性
ターゲットが画像と一体化しており、見た目の範囲よりも小さいヒットエリア	実際に操作しにくい

実装のヒント

CSSで以下のように設定する

.btn {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
}

• line-heightやpaddingを調整して、見た目が大きすぎずクリック可能範囲だけを広くする
• ::before や ::after で透明な領域を拡張することも可能

利点

• スマホでの操作性が向上
• 高齢者・視覚障害・運動障害のあるユーザーに配慮
• ユーザーのストレス軽減、離脱率の低下

まとめ

項目	内容
達成基準	2.5.5 ターゲットのサイズ（高度）
等級	AAA
要件	44×44 CSS ピクセル以上のクリックエリアを確保する
対象	すべての操作可能な UI 要素（リンク・ボタン・入力など）
例外	視覚上の距離、ユーザー調整可能な場合など一部
利点	操作ミス防止、ユーザビリティ・アクセシビリティ向上

一覧に戻る