フォーカストラップ (Focus Trap)

概要

ダイアログ（モーダル）やドロワーのようなオーバーレイUIを開いた際、Tabキーによるフォーカス移動が一巡すると、背面に隠れているメイン画面のリンクやボタンへフォーカスが「漏れて」しまう問題が発生する。これを防ぐため、モーダル内の最後の要素から次のTabキーで先頭の要素へ戻るように制御する技術。

フォーカストラップは、画面を見て操作するユーザーのためだけではなく、キーボード操作やスクリーンリーダー利用時に「いま操作できる範囲」を明確にするための仕組みでもある。

UXでの活用

• モーダルへの集中: ユーザーの操作文脈を現在のモーダル内に完全に固定し、誤操作による状態の不整合を防ぐ。
• スクリーンリーダー対応: 目が見えないユーザーにとっても、現在操作できる範囲を明示し、予期せぬ画面の移動によるパニックを防止する。
• キーボード操作の予測可能性: Tab / Shift+Tab の移動先をモーダル内に保ち、背面のリンクへ突然移動しないようにする。

誤用・混乱

フォーカストラップは「閉じ込めること」だけが目的ではない。閉じる手段、初期フォーカス、閉じた後のフォーカス復帰まで揃って初めて安全に機能する。 Escキーや閉じるボタンがなく抜け出せない状態は、アクセシビリティを高めるフォーカストラップではなく、ユーザーを閉じ込めるキーボードトラップになる。