トピックを検索
細く薄くて見つけにくいフォーカス表示
1pxの淡い青の枠でフォーカスは表示されていますが、細すぎるうえにページの色と近く、一目では見つけられません。
問題
弱視の人が、淡い細線のフォーカス表示を見つけられません。
白いページに並ぶ青いボタンをTabキーで移動し、続けて濃紺のバナー上の同じボタンも移動します。どのボタンにもフォーカスの枠が付くので、フォーカスは一応見えています。しかし枠は1ピクセルの淡い青です。白いページではほとんど消えてしまい、バナーの上では見えるものの、探さないと気付かない細い線です。
達成基準2.4.13「フォーカスの外観」（AAA）は、作成者がスタイルを付けたフォーカス表示に2つのことを求めます。1つは、フォーカス前の要素を囲む2 CSSピクセルの枠以上の面積があることです。もう1つは、変化するピクセルについて、フォーカス前とフォーカス後の色の間に3:1以上のコントラストがあることです。この例の枠は1ピクセルなので、どの背景でも面積の条件を満たしません。白いページでは #a8c7fa と #ffffff が1.72:1で、コントラストの条件も満たしません。
これは、フォーカスが見えることだけを求める2.4.7や、隣接する色に対して3:1を求める1.4.11より厳しい基準です。2.4.13のコントラストは状態の変化で測ります。各ピクセルを、フォーカス前の同じピクセルと比べます。
暗い画面や反射の強い画面を使っている人も影響を受けます。
10グループ中2グループに影響
多くの自動チェックは、フォーカスで何かが変わるかだけを確認します。この枠もその条件は満たします。2.4.13の面積を測るには要素の周囲の長さと表示の太さが、コントラストを測るには同じピクセルのフォーカス前後の色が、背景ごとに必要です。生成されたコードは、フレームワークの細い既定の枠をそのまま使ったり、強制配色で消える box-shadow だけを加えたりしがちです。
試してみる
Tabキーを押して、フォーカス中のボタンを探してください。
Tabキーで、白いページと濃紺のバナーのボタンを順に移動してください。
問題あり 直してみませんか？
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
フォーカス表示を2px以上の太さにし、フォーカス前後の色の間に3:1以上の差を付けます。
- 1フォーカス表示は、要素を囲む2pxの枠以上の大きさにする。
- 2変化するピクセルは、すべての背景で、元の色に対して3:1以上にする。
- 3主な表示が影や塗りでも、強制配色のためにoutlineを残す。
.brand-button:focus-visible { outline: 1px solid #a8c7fa; outline-offset: 2px;}枠の太さは必要な太さの半分です。白いページでは、淡い青が元の白に対して1.72:1しかありません。
枠は2ピクセルの太さで、ボタンの外側にあります。周囲の長さがボタンより長いため、面積は十分です。白いページでは #1a5fb4 が白を置き換えて6.29:1、バナーでは白が #0b2545 を置き換えて15.39:1になります。ただし条件を満たすのは、色を決めた背景の上だけです。新しい背景が増えるたびに確認が必要で、多くの場合は専用のルールも必要です。
3つとも2.4.13を満たします。背景ごとの枠はブランドに合わせやすい反面、背景ごとに色を決めて確認する必要があります。2色の枠は、利用者のテーマや編集者が選ぶ色も含め、一つのルールでどの背景にも対応できますが、見た目はやや重くなります。塗りの変化は枠を使いたくないデザインに向いていますが、ボタンの種類ごとに色の組み合わせが必要で、フォーカス時の見た目をホバーや押下時と区別する必要があります。ボタンが置かれる背景の数と、デザインがどれだけ変わるかで選んでください。
2ピクセルという条件は、線の太さではなく面積です。要素の外側にある枠は要素より周囲が長いため、2ピクセルで足ります。要素の内側に描く枠は周囲が短くなるため、同じ面積にするにはより太くする必要があります。破線や途切れのある枠、角の丸い枠も面積が減るため、思い込まずに測ってください。
数えるのは変化するピクセルだけです。半分がボタンの上、半分がページの上にある枠は、置き換えるそれぞれの色に対して3:1が必要です。ページに対して3:1のグレーの枠でも、グレーのカードの上では足りないことがあります。
親要素の overflow: hidden で、外側の枠の一部が欠けることがあります。要素の周りに余白を確保するか、負の outline-offset とより太い枠を使います。この基準には、ブラウザーが描き、作成者が変更していないフォーカス表示を対象外とする例外があります。ブラウザーの既定に頼ることもできますが、ブラウザーごとに表示は異なり、多くのサイトはいずれにせよ上書きしています。
フォーカス表示はデザイントークンや共通コンポーネントのスタイルにまとめ、テーマの変更で再び細くならないようにします。
修正の確認
マウスを使わない5つの確認
確認方法： コントラストの測定、キーボード、ズーム、強制配色
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通のテーマやコンポーネントのスタイルを変更した際は、再度確認します。
制限
2.4.13はAAAの基準のため、多くの適合目標では必須ではありません。それでも、フォーカスが見やすいかどうかを最も明確に確かめられる基準です。これを満たす表示は、2.4.7と、1.4.11のフォーカスに関する部分も満たします。ここでの色は例なので、実際の色で測ってください。実際の背景で、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。