【実務・中級編】インライン要素を含むフォーカストラップ – HTML実践ガイド

フォーカストラップの核心は、「フォーカスがモーダルの最後の要素に達した際、強制的に最初の要素へワープさせる」という監視ループを回すことにある。

—

実践：現場で使える「フォーカストラップ」のベストプラクティス

多くのライブラリがこの処理を抽象化しているが、要件に合わせて自作できるようになると、ライブラリの依存関係を最小限に抑えられる。以下に、可読性と堅牢性を両立させた実装を示す。

/

• モーダル内のフォーカスをトラップする関数
• @param {HTMLElement} modal – モーダルコンテナ

/
function trapFocus(modal) {
// フォーカス可能な要素をすべて取得（インライン要素のtabindex=”0″も含む）
const focusableElements = modal.querySelectorAll(
‘a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex=”-1″])’
);

const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length – 1];

modal.addEventListener(‘keydown’, (e) => {
const isTabPressed = e.key === ‘Tab’ || e.keyCode === 9;

if (!isTabPressed) return;

if (e.shiftKey) {
// Shift + Tab の場合：最初の要素なら最後へ
if (document.activeElement === firstElement) {
lastElement.focus();
e.preventDefault();
}
} else {
// Tab の場合：最後の要素なら最初へ
if (document.activeElement === lastElement) {
firstElement.focus();
e.preventDefault();
}
}
});
}

—

なぜこれが「現場の正解」なのか

このコードの肝は、`querySelectorAll` で取得するセレクタの網羅性にある。

• `a[href]` は当然として、`[tabindex]:not([tabindex=”-1″])` を含めることで、`` や `
  ` をインタラクティブに使っているような変則的なモーダルにも対応できる。
• `e.shiftKey` を判定することで、逆方向への移動（Tabキーの逆行）にも完全対応している。

注意すべき「落とし穴」

現場でよくある失敗は、モーダルが開いた瞬間にフォーカスを移動させる処理を忘れることだ。モーダルを開くトリガーとなったボタンからフォーカスが外れたままでは、ユーザーは「どこから操作を始めればいいか」を迷ってしまう。

必ず、モーダル表示直後に `firstElement.focus()` を叩くことを忘れないでほしい。

—

今後の展望：ネイティブの力「Focus Management」

正直に言おう。現代のフロントエンド開発では、将来的にはこの手のスクリプトは不要になる可能性がある。W3Cで策定が進んでいる `