タップ領域とは、スマホなどの画面で、指やほかのポインターで押すと操作が反応する範囲のことです。
写真アプリで「編集」と「削除」の小さなアイコンが隙間なく並んでいたら、電車の揺れで隣を押しそうになります。見た目の絵が小さくても、透明な押せる範囲を広げ、隣との間を取れば誤操作を減らせます。ただし、電車の例は状況の説明であり、適合を証明する測定ではありません。
WCAG 2.2の条件を確認する
WCAG 2.2の達成基準2.5.8「Target Size (Minimum)」では、ポインター入力の対象を原則24×24 CSSピクセル以上にするか、小さい対象同士に所定の間隔を確保することをレベルAAの条件としています。文中リンク、同等の操作、ブラウザが決める部品などには例外があります。
24×24は物理的な指の幅ではなく、CSS上の適合条件です。すべての人にとって十分な理想値だと決めつけず、利用場面やユーザーに応じて、より広い領域も検討します。
見る場所は3つ
- 見た目。 アイコンやラベルが、何の操作か分かるか
- 反応範囲。 装飾ではなく、実際に押せる箱の大きさはどうか
- 間隔。 隣の操作を誤って押しにくい距離があるか
ボタンの外見だけを測ると、実装された反応範囲を見落とします。ブラウザの開発者ツールや実機で、リンク・ボタン要素の箱と操作結果を確認します。
よくある誤解
「アイコンを24pxにすれば合格」という誤解です。測るのは画像の寸法ではなく操作対象です。また、小さい対象は間隔や例外条件も含めて判定するため、数字一つだけでは決まりません。
30秒で試す
スマホ表示で一番小さいアイコンを一つ選び、見た目ではなく押せる範囲を表示します。次に、隣の操作との間隔を確認してください。まず一か所を直せば、同じ部品を使う画面にも改善を広げられます。
関連して学ぶ
- スマホのボタンの大きさ — 押しやすいサイズと間隔
- 押せると分かるボタンの作り方 — 押せる合図の付け方
- 操作設計室 — UIと操作の学習室