操作位置の目印に、十分な面積と状態間の明暗差を確保する。

05条件と補足

面積と明暗差を同じ部分で満たす

目印のうち、フォーカス前後の同じ位置で3:1以上のコントラスト比を持つ部分を数えます。その面積が、フォーカス前の部品又はその一部分の外周を太さ2 CSS pxの線にした面積以上であることが必要です。

目印の全てが3:1になる必要はありません。ただし、色の変化が足りない部分を、必要な面積へ足すことはできません。

太さ2pxの枠だけを唯一の方法として求める基準ではありません。塗りつぶしや別の形でも、必要な面積と明暗差があれば使えます。1pxの線も、ほかの変化を加えて面積を満たす場合があります。図の問題側は、細い線だけで面積が足りない例です。

部品と面積の基準

基準にするのは、見た目として認識される部品又はその一部分です。例えば、開いたメニューの項目や、フォーカスを受ける表のセルなどがあります。部品の内容・背景・境界線を含めて考え、外側の影や光彩は含めません。

四角い部品では、公式解説の参考式は「4×幅＋4×高さ」です。図の144×44 CSS pxの部品なら、参考面積は752 CSS px²です。角の丸みや目印の位置で計算が変わるため、複雑な場合は面積に余裕のある目印にする方法もあります。

CSS pxは画面の物理的な画素数とは異なる、CSSで指定する単位です。色の比較は指定された色を基にでき、文字や線の縁のぼかしなど、表示時の補正を計算に含める必要はありません。

ブラウザーなどが決める目印の例外

次のいずれかに当たる場合は、この基準の例外です。

• 目印がブラウザーなどのユーザーエージェントによって決められ、制作者が調整できない。
• 目印と、その目印の背景色を、制作者が変更していない。

HTMLの部品を使ったことだけで、常に例外になるわけではありません。制作者が目印や背景をどう変更したかを確認します。例外に当たる場合も、ほかの適用される基準は別に確認します。

見えること・隠れないこととの違い

2.4.7「フォーカスの可視化」は目印が見えること、1.4.11「非テキストのコントラスト」は同じ状態で隣り合う色との明暗差などを扱います。2.4.13は、目印の面積と、同じ位置での状態間の変化を扱います。

2.4.12「隠されないフォーカス (高度)」は、フォーカスを受けた部品が、制作者のコンテンツによって一部も隠れないことを扱います。枠を太くするだけで、ほかの表示に隠れる問題まで解決するとは限りません。