キーボードフォーカスが見えない

Diagnosis

この所見が意味すること

操作要素へフォーカスしてもoutline・border・shadowなどの変化がありません。

所見は断定ではありません。表示された根拠と設計意図を照合してから本番コードを変更してください。

Detection

CSS Doctorの判定方法

1. 貼り付けたHTML・CSSをネットワーク遮断したiframe内で隔離表示します。
2. 静的ルールはソース構造を、表示ルールは実際の寸法や計算済みスタイルを確認します。
3. 目的、重要度、確度、影響範囲、修正安全度の順で所見を並べます。

Before / After

最小コード例

.button:focus { outline: 0; }

.button:focus-visible { outline: 3px solid #176b54; outline-offset: 3px; }

例は出発点であり、万能な修正ではありません。Tier A・Bは適用前に差分を表示し、Tier Cは自動適用しません。

Limitations

検出の限界と手動確認

色変化だけの独自表示はキーボードで最終確認します。

• ツールへ貼っていない本番CSSは取得・比較しません。
• 入力したJavaScriptは実行しません。
• すべての画面幅とキーボード操作で最終確認してください。