大きさと間隔が必要な理由
WCAG 2.2の達成基準2.5.8（レベルAA）は、ポインターで操作する対象を原則24×24 CSSピクセル以上にするか、小さい対象の周囲に所定の間隔を確保するよう求めています。より厳しい達成基準2.5.5（レベルAAA）は44×44 CSSピクセル以上です。
だから標準は、重要なボタンを44×44 CSSピクセル以上から検討し、少なくともAAの条件を外さないことです。詳しい例外と測り方は、W3Cのターゲットサイズ（最低限）の解説で確認できます。
たとえるなら、玄関の靴脱ぎ場です。靴を置く面積だけでなく、隣の靴とぶつからない間も必要です。操作対象も、大きさと隣との間隔を同時に見ます。ただし、この例は2つの関係を説明するだけです。実際の基準は指の実寸ではなくCSSピクセルで判定し、文中リンクなどには例外があります。
24と44は競合する数字ではありません。24はWCAG 2.2レベルAAの最低基準を判定するときの値で、44はより厳しいレベルAAAの値であり、重要な操作を押しやすく設計する候補です。対象利用者、操作の頻度、誤操作したときの影響を見て、最低線より大きくするかを決めます。アクセシビリティの最初の3点と合わせ、サイズだけで完了扱いにしないようにします。
| 操作の例 | 最初の候補 | 理由 |
|---|---|---|
| 購入・予約・送信 | 44×44 CSSピクセル以上 | 頻度や結果の重さから、狙いやすさを優先 |
| アイコンの補助操作 | 24×24以上、可能なら拡大 | 見た目を変えず反応領域を広げられる |
| 文中リンク | 文脈上の例外を確認 | 行間と隣接リンクによる誤操作を見る |
| 地図上の点など | 表現上の例外を確認 | 同等の大きい操作を別に用意できるかを見る |
身近な例では見た目と範囲を分ける
アイコン自体を44ピクセルで描く必要はありません。小さなアイコンの周囲に透明な余白を含むクリック領域を持たせれば、見た目を保ちながら操作対象を広げられます。
確認するのは画像の寸法ではなく、リンクやボタンとして反応する領域です。開発者ツールで要素の幅と高さを見たり、フォーカス表示で境界を確かめたりします。ラベルを押しても同じ操作ができるフォームなら、そのラベルを含む領域も点検します。
たとえば24ピクセルの閉じるアイコンでも、周囲を含む44ピクセル四方のボタン要素へ置けば、見た目を大きくせず狙える範囲を広げられます。ただし、その透明な領域が隣のボタンへ重ならないようにします。CSSの疑似要素だけで広げる場合も、クリック、フォーカス、読み上げの対象が一貫しているかを確かめます。
小さい対象では限界と例外まで見る
24×24 CSSピクセル未満でも、24ピクセルの円を対象の中心に置いたとき、隣の操作対象や同じ円と重ならない配置なら、間隔の例外で基準を満たす場合があります。ただし、小さな対象が押しやすくなるとは限りません。可能なら対象自体を大きくするほうが、多くの人に扱いやすくなります。
文中のリンク、同等の大きい操作が別にある場合、ブラウザー既定の操作、表現上不可欠な場合などにも例外があります。例外を都合よく使わず、まず大きくできない理由を確認します。
例外で基準を満たすことと、利用者が押しやすいことは同じではありません。運動に制約がある人、揺れる車内で操作する人、片手で荷物を持つ人では、最低線を満たしていても誤操作が起こります。重要な操作ほど大きくし、削除と保存のように結果が逆の操作は距離を取ります。取り消しや確認を用意することも、サイズとは別の安全策です。
自分の画面で使う修正順
- 主要な操作を絞る。 画面内のボタンが多すぎるなら、最も使う操作を残します
- 押せる領域を広げる。 見た目のアイコンではなく、リンクやボタン要素の領域を調整します
- 隣との間を確保する。 誤って別の操作を起こさないか、上下左右を確認します
大きさだけでなく、押せると分かる文言やフォーカスも必要です。ボタンが押せそうに見える仕組みと合わせて点検してください。
一覧画面では、個々のアイコンを一斉に大きくする前に、使われていない操作を減らせないか見ます。数が減れば、残した操作へ十分な領域と間隔を与えやすくなります。メニューを開かなければ使えない操作が増える場合は、頻度の高いものだけ表へ残し、隠した操作を見つけられるかも確認します。
実機で操作を確かめる
今日のワーク：主要ボタンを測る
自分の画面で、最も重要なボタンと、その隣にある操作を1組選びます。
- 押せる領域の幅と高さをCSSピクセルで測ります
- 隣の操作との間隔を確認します
- 片手、拡大表示、キーボードで実際に操作します
数値を満たしても押し間違えるなら、主要ボタンを大きくするか、周囲の操作を離します。
端末によって物理的な大きさは変わります。数値の確認を入口にし、実際の利用者と端末で押しやすさを確かめることが仕上げです。
実機確認では、制作した人が丁寧に中央を押すだけでは不十分です。画面を片手で持つ、文字を拡大する、縦横を切り替える、キーボードで移動するなど、利用条件を変えます。押し間違いが起きたら、対象の幅・高さだけでなく、隣の操作との距離と文言の区別も記録します。
アクセス解析でクリック率だけを見ると、誤って押してすぐ戻った操作も成功に見える場合があります。完了率、取り消し、エラー、戻る操作を合わせて見て、観察で理由を確かめます。少数の端末確認には限界があるため、実際の問い合わせも改善材料にします。
共通部品へサイズを反映したら、ヘッダー、モーダル、カード、フォームなど狭い場所でも崩れないかを確認します。押せる領域を広げた結果、スクロールや別のリンクを妨げていないかも操作します。数値だけでなく、部品を置いた文脈までが確認対象です。
確認記録には、要素の幅と高さ、隣との距離、使った端末、拡大率、誤操作の有無を残します。同じ部品を別画面へ移したとき、周囲の条件が変わっていないかを比較できます。
押しやすさは、大きさ・間隔・合図で作る
最低基準は原則24×24 CSSピクセルまたは所定の間隔、重要な操作は44×44 CSSピクセル以上を候補にします。見た目のアイコンが小さくても、押せる範囲は広げられます。
指を物差しにするのではなく、CSSピクセルで測り、隣との間隔を見て、実機で操作する。この3段階で、押し間違いを減らせます。