2.1.2 キーボードトラップなし

要件

キーボードのみによる操作中に、フォーカスがあるコンポーネントから他のコンテンツに移動できなくなるような“キーボードトラップ”があってはならない。

もし制限される場合は、「Esc」キーや「タブ」キーなどで 明示的に抜け出す手段が提供されている必要があります。

内容

項目	内容
対象	キーボード操作でナビゲーションするすべてのインターフェース
フォーカス移動	Tabキーなどで前後の要素へ移動できる必要あり
トラップ状態	特定の要素内（例：モーダルやカスタムUI）でフォーカスが出られなくなるのはNG
脱出手段の提供	特殊なケースでは、Escapeキーや「戻る」リンクなどが必要

不適合の例

例	問題点
JavaScript製のモーダルウィンドウにフォーカスが入り、Tabで他の要素に移動できない	モーダルの中に閉じ込められる（＝トラップ）
カスタムUIコンポーネント内で矢印キーなどは機能するが、外部にフォーカスを出せない	キーボードだけでは他のUIへ移れない

適合の例

例	対応内容
モーダルを開いた際、Tabキーでモーダル内のフォーカスが循環し、「閉じる」ボタンに到達可能。その後は Escape キーでモーダルを閉じられる	明示的な脱出手段があるため適合
iframe やカスタムUIでも Tab / Shift + Tab で外部に戻れる設計になっている	フォーカス制御が正常で適合

実装上の注意

ポイント	推奨方法
JavaScript UI	focus() の使用時は tabindex を確認し、Trapにならないよう制御
モーダル	Escape キーで閉じられる機能を追加。Tabで巡回可能に設計
iframe や埋め込み要素	キーボードで iframe 外に出られるように tabindex="-1" を活用

コード例：フォーカストラップの回避

// モーダル内で Tab 移動が循環するよう制御
const focusableElements = modal.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
const firstEl = focusableElements[0];
const lastEl = focusableElements[focusableElements.length - 1];

modal.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    if (e.shiftKey && document.activeElement === firstEl) {
      e.preventDefault();
      lastEl.focus();
    } else if (!e.shiftKey && document.activeElement === lastEl) {
      e.preventDefault();
      firstEl.focus();
    }
  }
});

利点

• 視覚・身体障害のあるユーザーもキーボードだけで操作可能
• UIの一貫性が向上し、ユーザーの混乱を防ぐ
• 支援技術との互換性が高まり、アクセシビリティ要件を満たす

まとめ

• フォーカスが特定要素に閉じ込められる状況を防ぐことが目的
• 特にモーダル・ダイアログ・iframe・カスタムコンポーネントでは要注意
• 脱出方法（例：Escキー・閉じるリンク）を明示的に設ける

一覧に戻る