押せる範囲を広げ、狙った操作を選びやすくする。

05条件と補足

測るのは、実際に操作へ反応する範囲

ターゲットは、ポインターによる操作を受け付ける画面上の範囲です。マウス、タッチ、ペンなどが対象で、タッチスクリーンだけの基準ではありません。

文字やアイコンが小さくても、周りの余白を含む44×44 CSS px以上の範囲が同じ操作に反応すれば、サイズを確保できます。外側の入れ物や、反応しない余白だけを広げても、ターゲットは大きくなりません。

ほかのターゲットと重なる部分は、同じ操作を実行するか同じページを開く場合を除き、サイズの測定に含めません。

CSS pxで幅と高さを確認する

CSS pxは、ウェブページの配置に使うCSSピクセルです。画面の物理的な画素数とは異なります。表示倍率を上げて見かけを大きくすることと、制作者が44×44 CSS pxのターゲットを用意することは分けて考えます。

幅だけ、又は高さだけが44 CSS pxあっても十分ではありません。両方を確認します。公式の達成方法C44は、CSSで最小の幅と高さを設定して、ページ切替のターゲットを大きくする例を示しています。

四つの例外

文中のリンクなどはインラインの例外になります。一方、独立した一文全体がリンクになっている場合や、番号ボタンを横に並べた場合を、同じ例外にはしません。

標準のHTML部品を使っていても、制作者がCSSなどでサイズを変更した場合は、ユーザエージェントの例外を自動的には使えません。

必要不可欠とは、その表示を取り除くと情報や機能が根本的に変わり、かつ、ほかの適合する方法では実現できないことです。単にデザインへ収めるために小さくしたこととは区別します。

最低限の24 CSS pxとの違い

2.5.8「ターゲットのサイズ (最低限)」はAAで、24×24 CSS pxや、間隔を確保する例外を扱います。2.5.5はAAAで44×44 CSS pxを求め、小さいターゲットの周りを空けるだけで代える間隔の例外はありません。

この44 CSS pxは下限です。よく使う操作や、取り消しにくい操作では、さらに広い範囲を用意することも公式解説で勧めています。実際の操作のしやすさも確認します。