css-focus-indicator-suppressed
フォーカスインジケーターを代替なしに削除してはいけません
:focus/:focus-visibleのルール、またはa { outline: none }のような状態を持たないルールによってフォーカスのアウトラインが取り除かれ、該当するどのフォーカスのルールにも代わりのインジケーター(border、box-shadow、background、...)がない、タブ順序内の要素を検出します。
適用範囲:読み取れるスタイルシートにアウトラインを取り除くルールが少なくとも1つあるページ上の、順次フォーカスナビゲーションの対象要素(タブ移動可能でレンダリングされているもの)。そのようなルールがどこにもなければ、すべての要素がユーザーエージェント自身のインジケーターを保つため、確認することはありません。
期待される結果:アウトラインを取り除くルール(outline: none、outline: 0、outline-color: transparent、...)に一致する要素がないこと。ただし、その要素に一致するいずれかのフォーカスのルールが代わりを描画する場合は除きます。代わりとは、ボーダー、box-shadow、背景、色の変化、独自の正のアウトライン、または::before/::afterの装飾です。取り除くルールは、:focus/:focus-visibleのルールか、状態をまったく持たないルール(a { outline: none }、* { outline: 0 })のどちらかです。作成者の宣言は詳細度にかかわらずユーザーエージェントのフォーカスのアウトラインより優先されるため、フォーカスされた状態でもインジケーターを取り除きます(WCAG F78)。:not(:focus-visible)の下でだけ取り除くルールは、キーボードフォーカスのインジケーターを残すため数に入りません。focus-visibleポリフィルでの同じ形(.js-focus-visibleの下の:not(.focus-visible)、[data-js-focus-visible]の下の:not([data-focus-visible-added]))も同様です。
検出結果が報告する内容:
suppressingSelectors:要素のアウトラインを取り除いているスタイルシートのルールのセレクターです。セレクターごとに1項目です。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<style>.reset-only:focus { outline: none; }</style><a class="reset-only" href="/pricing">Pricing</a>
:focus { outline: none; }がフォーカスインジケーターを削除しており、このリンクに一致する他のどのルールも代わりのものを描画していません。
<style>a { outline: none; }</style><a href="/news">News</a>
:focusを持たないルールもリンクにフォーカスがある間は適用され、ブラウザー自身のフォーカスのアウトラインより優先されます(F78)。代わりを描画するフォーカスのルールはありません。
<style>.reset-shadow:focus { outline: none; box-shadow: 0 0 0 3px navy; }</style><button class="reset-shadow" type="button">Send</button>
アウトラインを取り除くのと同じルールが、代わりにbox-shadowを描画しています。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
FOCUS_INDICATOR_SUPPRESSED
- レポートに示された要素のすぐ手前をクリックし、要素にフォーカスが移るまでTabキーを押してください。
- 要素がフォーカスを受け取ったときに、要素とその周辺に目に見える変化があるか確認してください。
- TabキーとShift+Tabでフォーカスを外したり戻したりして、2つの状態を比べてください。
満たす場合:要素にフォーカスがあるとき、アウトライン、枠線、下線、色や背景の変化などの目に見えるインジケーターが表示されます。
満たさない場合:要素がフォーカスを受け取っても目に見える変化がないため、WCAG 2.4.7を満たしません(F78)。