css-focus-indicator-suppressed

フォーカスインジケーターを代替なしに削除してはいけません

manualWCAG 2.4.7 (AA)確度:medium重大度:seriousoperable

: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と、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

can't tell
<style>.reset-only:focus { outline: none; }</style>
<a class="reset-only" href="/pricing">Pricing</a>

:focus { outline: none; }がフォーカスインジケーターを削除しており、このリンクに一致する他のどのルールも代わりのものを描画していません。

can't tell
<style>a { outline: none; }</style>
<a href="/news">News</a>

:focusを持たないルールもリンクにフォーカスがある間は適用され、ブラウザー自身のフォーカスのアウトラインより優先されます(F78)。代わりを描画するフォーカスのルールはありません。

n/a
<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

  1. レポートに示された要素のすぐ手前をクリックし、要素にフォーカスが移るまでTabキーを押してください。
  2. 要素がフォーカスを受け取ったときに、要素とその周辺に目に見える変化があるか確認してください。
  3. TabキーとShift+Tabでフォーカスを外したり戻したりして、2つの状態を比べてください。

満たす場合:要素にフォーカスがあるとき、アウトライン、枠線、下線、色や背景の変化などの目に見えるインジケーターが表示されます。

満たさない場合:要素がフォーカスを受け取っても目に見える変化がないため、WCAG 2.4.7を満たしません(F78)。

ソースコードを見る