移行中の知識
操作ターゲットの大きさ
Target Size
定義
操作ターゲットの大きさ（target size）とは、ポインター入力で操作できる領域の寸法です。WCAG 2.2のSuccess Criterion 2.5.8（Level AA）では原則24×24 CSS px以上を求めつつ、十分な間隔、同等の別操作、文中リンクなど複数の例外を定めています。Level AAAの2.5.5では44×44 CSS px以上というより強い基準があります。見えているアイコンの大きさと実際の操作領域は同じとは限らず、viewport幅だけからmouseかtouchかを決めつけません。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
responsive site header
狭いheaderで操作領域を詰めすぎない
見るポイント
mobileでnavigationやutility iconが並ぶ時、見た目のiconだけを小さくして収めず、実際のclick / tap領域と隣接targetの距離を確認する。PC幅でもtouch入力があり得るため、desktopになった瞬間に操作領域を極端に小さくしない。
検索結果一覧
ページネーション
見るポイント
数字や矢印の見た目だけでなく、各リンクの実際の操作領域と隣接ターゲットとの間隔を見る。小さい数字を無理に拡大することだけを解決策にしない。
注意
誤解しやすい点
- アイコンや文字の描画サイズだけを測り、実際に反応するクリック領域を確認しない。
- 24×24 CSS px未満は例外なく不適合だと単純化し、WCAG 2.5.8のspacingやinlineなどの例外条件を無視する。
- Level AAAの44×44 CSS pxをLevel AAの最低要件として混同する。
- mobile幅ならtouch、desktop幅ならmouseだけだと仮定してtarget sizeを切り替える。
関連
関連する概念
出典