WCAG 2.2「2.5.5 ターゲットサイズ（強化）」とは：44×44 CSSピクセルの実装とテスト

greeden

2年前

小さなボタンやリンクは、指やマウスポインターで狙いにくく、隣の項目を誤って操作する原因になります。

WCAG 2.2の達成基準2.5.5「ターゲットサイズ（強化）」は、ポインターで操作する領域を十分に確保するための基準です。

この記事では、44×44 CSSピクセルの意味、例外の判断、実装方法、確認手順を順に説明します。

達成基準2.5.5が求める操作領域

ターゲットとは、ボタンやリンクなど、画面上でポインター操作を受け付ける領域です。

ポインターには、指によるタッチだけでなく、マウスやペンも含まれます。

CSSピクセルは、CSSで長さを指定するときの基準単位であり、画面を構成する物理的なピクセル数と常に同じではありません。

例外に該当しないターゲットは、横と縦の両方が少なくとも44 CSSピクセル必要です。

この達成基準はLevel AAAです。

ただし、2.5.5だけを満たしても、ページ全体がLevel AAAに適合したことにはなりません。

Level AAAへの適合を表明するには、対象ページがLevel A、AA、AAAの達成基準を満たす必要があります。

44×44 CSSピクセルを求めない4つの例外

例外は、単に「小さくしたい」というデザイン上の都合ではなく、達成基準に示された条件で判断します。

達成基準2.5.5の例外
例外	判断の要点	例
同等	同じページに、同じ操作を実行できる44×44 CSSピクセル以上のリンクまたはコントロールがある	小さなアイコンとは別に、同じ機能を持つ十分な大きさのボタンがある
インライン	ターゲットが文または文章のまとまりの中にある	段落内のテキストリンク
ユーザーエージェントのコントロール	ブラウザなどがサイズを決めており、制作者が変更していない	制作者がCSSで大きさを変えていないブラウザ標準のコントロール
本質的	特定の大きさや配置が情報を伝えるうえで欠かせず、別の方法では同じ情報や機能を提供できない	位置そのものが情報を表す操作領域

「レイアウトに余裕がない」だけでは、本質的な例外の根拠になりません。

まずレイアウトや操作方法を見直し、それでも特定の表現が情報や機能に欠かせないかを確認します。

固定サイズではなく最小サイズで実装する

ラベルの長さや文字拡大に対応するには、固定の幅と高さよりも最小サイズを指定する方法が扱いやすくなります。

<button class="action-button" type="submit">送信</button>

.action-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0.5rem 0.75rem;
}

min-inline-sizeとmin-block-sizeを使うと、横書きでは幅と高さの最小値を保ちながら、長いラベルに合わせてボタンを広げられます。

アイコンだけのコントロールでも、見えるアイコン自体を44×44 CSSピクセルに拡大する必要はありません。

アイコンを含むボタンやリンクの操作領域を44×44 CSSピクセル以上にします。

インラインリンクへ一律に余白を加えない

段落内のリンクは例外に該当するため、すべてのa要素へ一律に大きな余白を指定する必要はありません。

一律の余白は、行間の重なりや文章の折り返し崩れを招くことがあります。

インラインリンクを押しやすくしたい場合は、文章の読みやすさを保ちながら、リンクの配置や行間を個別に調整します。

ターゲット間の余白は補助策として使う

ターゲット同士に余白を設けると、隣の項目への誤操作を減らしやすくなります。

ただし、余白だけでは2.5.5の44×44 CSSピクセルという要件の代わりになりません。

ターゲットが重なっている場合、異なる操作を行う重複部分は、それぞれのターゲットサイズとして数えずに確認します。

実装時に避けたい4つの誤解

スマートフォンだけ対応すればよい：ポインターにはマウスやペンも含まれるため、画面幅だけで対象を決めません。
見えるアイコンを44×44にする：測る対象は、見た目の図形ではなくポインター操作を受け付ける領域です。
ターゲット間に余白があればよい：例外に該当しないターゲット自体に44×44 CSSピクセル以上の操作領域が必要です。
自動検査を通れば確認は完了する：例外の妥当性や実際の押しやすさは、人が操作して確かめます。

手動テストの進め方

ページ内のボタン、独立したリンク、アイコン、ページ送りなど、ポインターで操作するターゲットを洗い出します。
44×44 CSSピクセル未満のターゲットについて、4つの例外のどれかに該当するかを確認します。
例外に該当しないターゲットは、ブラウザの開発者ツールで操作領域の幅と高さを測ります。
文字を拡大した状態や異なる画面幅でも、ターゲットが縮んだり重なったりしないかを確認します。
タッチ操作とマウス操作を行い、端まで反応するか、隣の項目を誤操作しにくいかを確かめます。

自動検査ツールは候補の発見に利用できますが、例外の判断と操作感の確認をすべて代行するものではありません。

基準と関連情報を確認する

押しやすさを運用の中で確かめる

44×44 CSSピクセルは、実装時に一度指定して終わる項目ではありません。

文言変更、部品の再利用、レスポンシブ対応によって操作領域が変わるため、公開前と更新後に測定と操作確認を行います。

当社では、Webアクセシビリティの導入と継続的な改善を支援するUUU ウェブアクセシビリティを提供しています。

自社サイトの操作しにくい箇所を把握したい場合は、サービスの詳細をご覧ください。