フォーカスが部分的に隠されていない

Silktide は、キーボードでコントロールを選択したときに、その一部が Cookie バナーや固定ヘッダーなどの他のコンテンツの背後に隠れていないことをテストします。部分的に隠れたコントロールでも、キーボードを使うユーザーはページ上の自分の位置が分からなくなることがあります。

この問題の最も一般的な原因は、ページをスクロールしても同じ位置に留まる要素です。

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

これは、フォーカスが隠されていないの、より厳しいレベル AAA 版（達成基準 2.4.12）です。のチェックでは完全に覆われたコントロールのみが検出されますが、このチェックでは少しでも覆われていれば検出されます。

重要な理由

キーボードで操作する人は、どのコントロールにいるかを把握するためにインジケーターを追います。フォーカスされたコントロールの一部が Cookie バナーや固定フッターの下に隠れると、ユーザーはインジケーターを見落としたり、コントロールのラベルを誤って読んだり、操作していた場所を見失ったりする可能性があります。また、画面上で部分的に隠れているコントロールが、より小さな画面では完全に隠れることもあります。

修正方法

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

Silktide によるテスト方法

デスクトップとモバイルの両方のページ表示で、キーボードユーザーがすべてのフォーカス可能な要素を Tab キーで順番に移動する様子をシミュレートします。
ブラウザーがフォーカスされた各要素を画面中央まで垂直にスクロールする様子をシミュレートします（下記のスクロールに関する注記を参照）。
フォーカスされた要素の上に別の要素が重なっていないかをチェックします。背景が透明または半透明の重なり要素は、フォーカスインジケーターがその背後から見えるため無視されます。
コントロールの一部でも不透明な要素に覆われていれば、そのコントロールにフラグを付けます。レベル AA を満たすだけでよい場合は、完全に覆われたケースがフォーカスが隠されていないで報告されます。

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

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

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

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

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

トラブルシューティング

フォーカスされた要素が問題なく見える

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