モーダルのフォーカストラップ

Silktide は、モーダルダイアログ（ページの残りの部分とのインタラクションをブロックするポップアップ）を含むページを特定し、ダイアログが開いている間、キーボードフォーカスが正しく管理されているか確認するよう求めます。これは手動レビューです。自動テストでダイアログを見つけることはできますが、開閉時にどのように動作するかを確認することはできません。

重要な理由

モーダルダイアログが開いている間、その背後のページは表示されていますが操作できない状態です。がダイアログの外に逃げてしまうと、キーボードやを使用するユーザーは、見たり操作したりできないコンテンツを Tab キーで移動することになり、文脈を失ったまま背後のページを読み上げられ、現在位置も完全に失ってしまいます。また、ダイアログが閉じたときにフォーカスが戻らないと、ページの先頭に移動させられ、元いた場所まで再び移動しなければなりません。

修正方法

ページ上の各ダイアログを開き、キーボードだけを使って確認します。

ダイアログが開くと、フォーカスがダイアログ内に移動する（通常は最初のコントロールまたはダイアログ自体に移動する）。
Tab キーと Shift+Tab キーを押すと、ダイアログのコントロール間を循環し、背後のページに到達することがない。
Escape キーを押すと、ダイアログが閉じる（閉じることができるダイアログの場合）。
ダイアログが閉じると、フォーカスがダイアログを開いた要素に戻る。

いずれかが満たされない場合は、ダイアログの実装を修正してください。showModal() で開かれるネイティブの <dialog> 要素は、この動作の大部分を自動的に提供します。カスタムダイアログでは、これをスクリプトで実装する必要があります。すべて正しく動作する場合は、該当事項をしてください。

Silktide によるテスト方法

ページにモーダルダイアログが含まれている兆候を探します。ネイティブの <dialog> 要素、role="dialog" または role="alertdialog" を持つ要素、 aria-modal="true" を持つ要素、またはフォーカス可能なコントロールも含む、モーダルでよく使われるスタイルのクラス名を持つ要素が対象です。
これらのいずれかが見つかった場合、そのページに対して 1 件のレビュー用プロンプトを表示します。

Silktide はダイアログを開いて実行時のフォーカス動作を確認できないため、このチェックが自動的に失敗することはありません。確認するよう求められます。

トラブルシューティング

ページに表示されるモーダルがない

多くのサイトでは、特定の条件でのみ表示されるダイアログのマークアップ（ニュースレターのポップアップ、Cookie ダイアログ、非表示の検索オーバーレイなど）が、すべてのページに含まれています。プロンプトは引き続き適用されます。ダイアログが開く状態での動作を確認してください。マークアップが残存しているだけで、決して開かない場合は、削除を検討してください。

ダイアログがサードパーティ製ライブラリによって提供されている

よく知られたダイアログライブラリは通常、フォーカスを正しく管理しますが、設定やカスタムコンテンツによって動作が損なわれることがあります。ライブラリのドキュメントに頼るのではなく、自分のページで動作を確認してください。