トピックを検索
ターゲットサイズが足りない、詰まったボタン
16ピクセルのアイコンボタンを2ピクセル間隔で並べていて、少しずれたタップを受け止める余裕がありません。
問題
手の震えがある人や指の大きい人、ポインターを細かく動かせない人が、ボタンを押し間違えたり押し損ねたりします。
買い物かごに、商品が1行ずつ並んでいます。「リネンのナプキン 数量2」の横に、数量を減らす、増やす、商品を削除する、の三つのアイコンボタンがあります。ボタンは16×16ピクセルで、間隔は2ピクセルです。スマートフォンで「＋」をタップすると、かなりの割合で「×」に当たり、商品が消えてしまいます。マウスでも、手を慎重に止めないと押せません。
WCAG 2.5.8「ターゲットのサイズ（最低限）」は、ポインターで押すターゲットに24×24 CSSピクセル以上を求めます。小さなターゲットでも、その中心に置いた直径24ピクセルの円が、ほかのターゲットや、ほかの小さなターゲットの円と重ならなければ満たせます。この例では、ボタンが16ピクセルで中心どうしが18ピクセルしか離れていないため、円が重なり、どちらの条件も満たしません。文中のリンクでもなく、同じ機能の大きなボタンもなく、この大きさが不可欠な理由もないため、例外にも当たりません。
手の震えや細かい動きに制限がある人、ヘッドポインターや視線入力、マウススティックを使う人、揺れる電車の中で親指でタップする人が影響を受けます。高齢の人やロービジョンの人も、小さなターゲットを押し損ねがちです。押し損ねて何も起きないだけでも不便ですが、隣の操作、たとえば商品の削除が実行されると、やり直しの手間がかかり、サイトへの信頼も失われます。
大きさと間隔は寸法の問題なので、自動チェックで測れます。axe-coreの target-size ルールは、この行を指摘します。一方で、同じ操作の大きなボタンがページのほかの場所にあるか、小さいことが不可欠かといった例外は判断できません。測るのは要素の箱なので、疑似要素で広げたクリック範囲も見えません。自動のクリックテストは要素のちょうど中心を押すため、隣のボタンに当たることがありません。AIが生成するデザインは、アイコンボタンを文字の大きさに合わせて小さくしがちで、スクリーンショットでは整って見えます。小さなターゲットはスキャンで見つけ、修正はクリック範囲を測り、実際に指でタップして確認します。
試してみる
「＋」をタップして、数量を5にしてください。
スマートフォンで試すか、「クリック範囲を表示」をオンにしてください。点線の円が重なっていると、少しずれただけで隣の「削除」などが押されます。
問題あり 直してみませんか？
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
各ターゲットを24ピクセル以上にするか、クリック範囲を広げるか、周りの直径24ピクセルの円が何にも触れないよう間隔を空けます。
- 1アイコンではなくクリック範囲を測る。24×24 CSSピクセル以上か、直径24ピクセルの円がほかのターゲットに触れない。
- 2クリック範囲を隣のターゲットと重ねない。
- 3HTML標準のbuttonと名前はそのままにし、大きさと間隔だけを変える。
<div class="line-actions"> <button type="button" aria-label="数量を減らす">−</button> <button type="button" aria-label="数量を増やす">+</button> <button type="button" aria-label="リネンのナプキンを削除">×</button></div>各ターゲットは16×16ピクセルで、中心どうしは18ピクセルしか離れていません。各ボタンの周りの直径24ピクセルの円が隣の円と重なるため、大きさと間隔のどちらの条件も満たしません。
各ボタンが32×32ピクセルになり、最低限の24ピクセルを十分に超えます。見えているボタン全体がクリック範囲なので、どこまで押せるかが分かります。HTMLは変わりません。flex-shrink: 0 で、狭い画面でボタンが縮むのを防ぎます。
ボタンを大きくしてください。クリック範囲を広げる方法と同じ効果を、より少ないCSSで実現でき、目に見えない部分が壊れる心配もありません。ターゲットが見やすくなり、2.5.5の44ピクセルにも近づきます。クリック範囲を広げる方法は、変更できないデザインシステムなどで見た目の大きさが決まっている場合に使います。基準は満たしますが、利用者は小さな形を狙うことになり、範囲が目に見えないため、後で間隔を変えたときに重なっても気付かれにくくなります。間隔を空ける方法は変更が最も小さく、押し間違いを防げますが、これだけでは不十分です。ターゲットは小さいままなので、手の震えがある人は押し損ねやすいままです。また、行やほかの操作部品が円の範囲に入った時点で、条件を満たさなくなります。
測るのはアイコンではなく、CSSピクセルでのクリック範囲です。paddingや疑似要素は含まれ、marginは含まれません。親要素に overflow: hidden があると、はみ出した疑似要素は切り取られ、クリック範囲も狭くなります。広げたクリック範囲を隣のターゲットや近くのリンクと重ねないでください。重なると上にある方が優先され、もう一方のターゲットが狭くなります。
文中のリンク、ブラウザーが大きさを決めていて変更していない部品、同じページに同じ機能の大きな操作部品があるターゲットは例外です。メニューの中に隠れた代わりの部品は頼りにしないでください。コンポーネントライブラリでは、使う場所ごとではなく、共通のアイコンボタンに最小サイズを指定し、新しい行で再び小さくならないようにします。
修正の確認
4つの確認
確認方法： ターゲットの測定、タッチ、マウス、ズーム
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通のボタンのスタイルを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。24ピクセルはレベルAAの最低限で、2.5.5の44ピクセルの方が多くの人にとって押しやすくなります。このガイドは1行に並んだアイコンボタンを扱っています。グリッド、スライダー、ドラッグ用のつまみは、別に確認が必要です。実際の利用者と端末で確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。