ユーザーのフォーカスが誤ってリージョンに閉じ込められない

キーボード フォーカスを特定のページ要素でロックしたりトラップしたりしないでください。ユーザーがキーボードのみを使用して、すべてのページ要素間を移動できるようにします。

手動でテストする方法

ユーザーが誤ってフォーカスをトラップしないことをテストするには、キーボードのみを使用して、すべてのページ要素間を移動します。「前へ」に移動するには TAB キー、戻るには Shift+TAB キーを使用します。

Tab キーですべてのページ要素を正常に移動できない場合は、キーボード ナビゲーションが正しく動作していません。予測入力ウィジェットに注意してください。キーボードのフォーカスが動かなくなる場合があります。

詳しくは、ユーザー補助機能の手動テストをご覧ください。

修正方法

モーダル ダイアログやウィジェットなど、複数の形式でコンテンツを表示するページは、フォーカス トラップのリスクがあります。

操作が必要なモーダルがあり、認識されるまでユーザーがページの他の部分を操作できないようにしたい場合は、その場合にのみ、ユーザーを一時的にトラップすることを検討できます。ただし、キーボードでアクセス可能な方法でモーダルをエスケープできるようにすることを検討してください。

アクセス可能なモーダルを作成する方法の例をご覧ください。この例では、フォーカス トラップから抜け出すためにユーザーにページの更新を強制することなく、モーダルの意図した動作を実現しています。

また、モーダルとキーボード トラップもご覧ください。

これが重要な理由

マウスを使用できない、または使用しないことを選択しているユーザーにとって、画面上のすべての要素にアクセスする主な手段はキーボード ナビゲーションです。優れたキーボード操作は、論理的なタブ順序と識別可能なフォーカス スタイルに依存します。キーボード ユーザーが特定のページ要素に閉じ込められた場合、ページを操作する方法はありません。

詳しくは、支援技術でテストする方法をご覧ください。

リソース

ユーザーのフォーカスが誤って領域内に閉じ込められていない監査のソースコード