フォーカスが隠されない

Silktide は、キーボードでコントロールを選択したときに、そのコントロールが Cookie バナーや固定ヘッダーなどの他のコンテンツの背後に完全に隠れていないことをテストします。選択したコントロールを確認できないキーボードユーザーは、ページ上のどこにいるのかを知る手段がありません。

最も一般的な原因は、ページをスクロールしても固定されたままになる要素です。

Cookie 通知など、ページの上部または下部に表示されるバナー
固定されたナビゲーションバーやフッター
フォーカスが背後に移動することを許してしまうポップアップダイアログ

このチェックは、レベル AA（達成基準 2.4.11）で求められる、完全な遮蔽を対象とします。より厳格なの関連基準であるフォーカスが部分的に隠されないでは、部分的に覆われているだけのコントロールも検出されます。

重要な理由

キーボードで操作する人は、どのコントロールにいるのかを確認するためにインジケーターを追います。フォーカスが Cookie バナーや固定フッターの下にあるコントロールへ移動すると、インジケーターが見えなくなります。ユーザーは Enter キーを押すと何が起こるのか、そもそも自分がどこにいるのかも分からず、ページを完全に離れてしまう可能性があります。

修正方法

要素を上に固定するのではなく、ページと一緒にスクロールするコンテンツを優先します。
固定バナーやヘッダーを表示し続ける必要がある場合は、CSS の scroll-padding または scroll-margin プロパティを使用して、フォーカスされた要素がその要素から離れた位置までスクロールされるようにします。詳しくは、WCAG Technique C43を参照してください。
ダイアログやポップアップでは、開いている間はフォーカスを内部に閉じ込め、背後にあるものにフォーカスできないようにします。ほとんどのダイアログライブラリやネイティブの <dialog> 要素では、これが自動的に行われます。

Silktide によるテスト方法

ページのデスクトップ表示とモバイル表示の両方で、キーボードユーザーがすべてのフォーカス可能な要素を Tab キーで移動する状況をシミュレートします。
フォーカスされた各要素が画面の中央に来るように、ブラウザーがページを縦方向にスクロールする状況をシミュレートします（下記のスクロールに関する注記を参照してください）。
フォーカスされた要素の上に他の要素が重なっていないかをチェックします。背景が透明または半透明の重なり要素は、フォーカスインジケーターがその要素越しに見えるため無視されます。
コントロールが不透明な要素によって完全に覆われている場合に検出します。部分的な重なりはこのチェックでは検出されません。これはフォーカスが部分的に隠されないでテストされます。

スクロールをシミュレートする理由

Tab キーを押す間にブラウザーがどれだけスクロールするかはウィンドウサイズによって異なるため、固定ヘッダーがフォーカスされた要素を覆うかどうかは、高さが数ピクセルしか違わない画面間でも異なる場合があります。ウィンドウサイズを1つに固定してテストすると、ウィンドウの高さが少し違う人には再現できない問題まで検出してしまいます。

そこで Silktide は、各要素が画面の中央までスクロールされたものとして評価します。この意図的に余裕を持たせた方法により、すべての画面サイズで一貫して発生する問題を検出し、特定のウィンドウの高さでのみ発生する問題は避けられます。W3C は、この達成基準のテスト方法を規定していません。

ページの読み込み後に開くダイアログ

ページにデフォルトで閉じられているダイアログが含まれている場合、Silktide は、ダイアログが開いている間はフォーカスがダイアログの外に出られないと想定します。これは、正しく構築されたダイアログの動作です。そのため、フォーカスが背後に逃げてしまう不具合のあるダイアログは、ページの読み込み時に開いていない限り検出されない場合があります。

トラブルシューティング

フォーカスされた要素は問題なく見えます

小さいウィンドウで確認してください。固定ヘッダーやフッターに隠れる要素は、特定のウィンドウの高さでのみ衝突することがよくあります。その要素が実質的に隠れることはないと判断した場合は、検出結果を無視できます。