押したいボタンを、押し間違えにくく。

05条件と補足

「ターゲット」は実際に反応する範囲

マウス、タッチ、ペンなどの操作に反応する画面上の範囲を「ターゲット」と呼びます。リンクの周りに余白を置いても、その余白が操作に反応しなければ、ターゲット自体は広がりません。

サイズの単位はウェブページの配置に使う「CSSピクセル」です。この教材では「CSS px」と表記します。画面の物理的な画素数とは異なり、ブラウザの拡大表示だけで要件を満たしたことにはできません。

長方形でない場合も、ページの縦横に沿った24×24 CSS pxの正方形が内側に収まるか確認します。丸いターゲットは、直径が24 CSS pxあるだけでは、その正方形は収まりません。

例外1：周囲の間隔が足りている

24×24 CSS px未満のターゲットについて、その形を囲む最小の長方形を考えます。この「境界ボックス」の中心に、直径24 CSS pxの円を置きます。

すべての小さいターゲットで同じように確認し、円が別のターゲットとも、他の小さいターゲットの円とも重ならなければ、間隔の例外を満たします。左右だけでなく上下や斜めの隣も確認します。

補足図では20×20 CSS pxのターゲット同士を8 CSS px離しています。中心間の距離は28 CSS pxなので、直径24 CSS pxの円同士は重なりません。周囲に他のターゲットがないこの配置についての例です。

例外2：同じ機能を使える別の操作部品がある

同じページ内に、この基準を満たす別の操作部品があり、同じ機能を実行できる場合です。別のページにあるだけではこの例外にはなりません。

例外3：文中などにある

文中のリンクなど、ターゲットが文の中にある場合です。また、ターゲット以外の文字の行の高さによってサイズが制約される場合も含まれます。独立して並ぶ小さなボタンが、文字を含むというだけでこの例外になるわけではありません。

例外4：ブラウザなどがサイズを決めている

ターゲットのサイズがブラウザなどのユーザエージェントによって決まり、制作者が変更していない場合です。

例外5：特定の表示が必要不可欠、または法的に必要

情報を伝えるために、そのターゲットを特定の方法で表示することが必要不可欠な場合や、その表示が法的に要求される場合です。例えば地図上の地点を示すピンでは、正しい位置に置くために互いの間隔が狭くなる場合があります。

「必要不可欠」は、取り除くと情報や機能が根本的に変わり、WCAGを満たす他の方法でも実現できないことを指します。

24 CSS pxと44 CSS pxを混同しない

この基準のサイズ要件は24×24 CSS pxです。44×44 CSS pxを扱う2.5.5「ターゲットのサイズ (高度)」は、レベルAAAの別の基準です。

押しやすさのために、24×24 CSS pxより広い範囲を用意することもできます。ここで示した改善例はページ切替リンクのサイズについての例であり、ページやサイト全体のWCAG適合を示すものではありません。