target-size-minimum
ポインターのターゲットは24x24px以上であるか、他のターゲットとの十分な間隔がある必要があります
ポインターで操作できるターゲットの実効的なヒット領域が24×24 CSSピクセル以上であるか、認められた例外(例:十分な間隔)を満たしていることを確認します。
適用範囲:<button>、<summary>、<a href>、<area href>、<input>、<select>、<textarea>、およびロールがbuttonまたはlinkに解決される要素(role属性のうち実在する最初のロールで、大文字と小文字は区別しません)のうち、ポインターで到達できるものに適用されます。ポインターで到達できるとは、レンダリングされていて、pointer-events:noneで無効化されておらず、ポインターが当たる部分が残っていることです(切り取られて見えなくなったターゲットには何も残っていません。display: contentsのターゲットは、その内容がターゲットになります)。ここではアクセシビリティツリーからの除外は条件になりません。aria-hiddenのコントロールも、ポインターで押せるターゲットであることに変わりはないためです。<area>は一致対象にはなりますが、実際には評価されません。計測できる自身のボックスを持たないためです。ElementInternalsによってbuttonまたはlinkロールを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じように扱われます。
期待される結果:各ターゲットが24×24 CSSピクセル以上であるか、このルールがジオメトリから確認できる達成基準2.5.8の例外のいずれかを満たしています。ターゲットとは、ポインターが当たる領域です。角の丸みと2Dのtransformを反映したボーダーボックスで、包含ブロックの連鎖上にあるclipとclip-path: inset()で切り取られ、そこにあるオーバーフローを切り取るボックスより大きくはならず、はみ出した内容を含みます。ターゲットの上に描画されるものは、別のターゲットであっても、ターゲットから何も差し引きません。装飾のレイヤー、オーバーレイ、固定された行がターゲットを覆うかどうかはスキャンの時点とスクロール位置によって変わるため、ターゲットのサイズについては何も示さず、2.5.8が計測するのはターゲットそのものだからです。重なり合う2つのターゲットは互いの円の中にあるため、小さすぎるほうはやはり近すぎます。オーバーフローを切り取るボックス(visible以外のoverflow、またはcontain: paint)が読み手やスクリプトによってスクロールされていても、現在の端の位置でターゲットを切り取ることはありません。ターゲットはそのボックス内にスクロールしたときの姿で全体を計測し、ボックスより大きくはなりません。また、ボックスが表示範囲外に置いているターゲットの近くにあるとみなすのは、そのボックス内のボックスとターゲットだけです。Understanding 2.5.8の計測方法に従い、ページの軸に沿った24×24の正方形がその領域に収まれば、十分な大きさです。例外とは、間隔(領域のバウンディングボックスを中心とする直径24pxの円が、無関係なターゲットの領域にも、ほかの小さすぎるターゲットの円にも届かない)、文中のターゲット(テキストの中に書かれたリンクやボタン)に対するインラインの例外(ブロックコンテナーのうち改行と改行の間の範囲に、どのターゲットにも含まれない、文字または数字を含むテキストがある)、ユーザーエージェントによるサイズ(スタイルが適用されていないネイティブのチェックボックスやラジオボタンで、appearanceがnoneにリセットされていないことで検出)です。小さすぎるターゲットが隣のターゲットに近すぎる場合はfailになります。例外が当てはまる可能性があっても確認できない場合(「Edit | Delete」のように、区切り文字だけを挟んで2つのインラインのリンクが互いに詰まっている場合や、必須である可能性があるSVG、canvas、イメージマップ内のターゲット)は、推測せずにcantTellとします。マージン(target-size-px):24×24以上のターゲットのうち最も小さいもので、そこに収まる最大の正方形の一辺(長方形では幅と高さの小さいほう)を24と比較します。その範囲はcontext.widthPxとcontext.heightPxが示します。24未満でも間隔の例外によって合格するターゲットは候補になりません。24から6px以内(30まで)のターゲットだけを近いとみなすため、最も小さいターゲットがそれより大きいページではマージンは得られません。measuredCountは、計測したすべてのターゲットの数です。
検出結果が報告する内容:
metrics.widthPx、metrics.heightPx:ポインターが当たる領域の範囲で、CSSピクセル単位です。metrics.squarePx:そこに収まる最大の正方形の一辺で、metrics.minSizePx(24)と比較されます。小数第1位に丸めますが、丸めると限界値に達してしまう場合は切り捨てるため、24未満のサイズが24と表示されることはありません。metrics.decidedBy:ターゲットが別のターゲットに近すぎることを見つけたもので、centerDistance(ほかの小さすぎるターゲットの円)またはregionDistance(円の中にある別のターゲットの領域)です。metrics.centerDistancePx、metrics.minDistancePx(centerDistance):ターゲットの中心から隣のターゲットの中心までの距離で、必要な24pxと比較されます。metrics.regionDistancePx、metrics.minDistancePx(regionDistance):隣のターゲットの領域がターゲットの中心からどれだけ離れているかで、円の半径12pxと比較されます。conflictWith:近すぎる隣のターゲットのセレクターです。measured.width、measured.height、measured.square:丸める前の領域の範囲と最大の正方形です。viewport.width、viewport.height:ページのレイアウトに使ったビューポートで、CSSピクセル単位です。レスポンシブなページでは、別の幅でターゲットのサイズや配置が変わることがあります。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
マージン:このルールはtarget-size-pxをCSSピクセル単位で測定し、値はしきい値に達している必要があります。しきい値を満たした値がしきい値の近くにあった場合、結果のmarginは、しきい値を満たしつつ最もしきい値に近づいた要素を示します。そのため、わずかな変更で判定結果が変わる箇所を、変わる前に把握できます。検出結果のフィールドとは異なり、安定した契約です。出力スキーマを参照してください。
例
<button style="width:24px; height:24px;">+</button>
単独で24×24 CSSピクセルの最小サイズを満たしています。
<button style="width:10px; height:10px; padding:0;">A</button><button style="width:10px; height:10px; padding:0; margin-left:5px;">B</button>
どちらのターゲットも10×10で24×24未満であり、中心間の距離は15pxと、間隔の例外に必要な24pxより近くなっています(padding:0が重要です。ブラウザーのボタンの既定のパディングがあると、それぞれの幅が広がります)。