【操作性UP】キーボードだけで快適に！開発者が知るべきフォーカス管理とtabindexの極意

前々回の記事ではARIA属性の効率的な管理、前回ではライブリージョンなどの動的なアクセシビリティ確保について解説しました。

本シリーズの最終回となる今回は、すべてのウェブアプリケーションの操作性の基盤となる「キーボードナビゲーション」と「フォーカス管理」に焦点を当てます。

マウスを使わないユーザー（キーボード操作のみのユーザーやスクリーンリーダーユーザー）にとって、TabキーやEnterキーが意図通りに機能するかどうかは、サイトの使いやすさ（アクセシビリティ）を決定づけます。

tabindex属性は、要素がキーボードのタブ順序に含まれるかどうか、またはプログラムからフォーカス可能かどうかを制御するために使用します。

`tabindex`値	動作	主な用途	開発上の注意点
`0`	タブ順序に含める。デフォルトの順序（ソースコード順）に従う。	`<div>`や`<span>`など、本来フォーカスできない要素をフォーカス可能にしたい場合。	極力これを使うべき。タブ順序がソースコード順と一致しているか確認する。
`-1`	タブ順序から除外する。ただし、JavaScriptでプログラム的にフォーカス可能。	モーダルが開いた直後、最初にフォーカスを当てたい要素。カスタムUI内で矢印キー操作を実装したい要素。	タブキーでスキップされるため、ユーザーに重要な要素には使わないこと。
`正の数` (`1`以上)	タブ順序を数字順にカスタマイズする。	原則として使用非推奨。ソースコード順と大きく異なる順序になり、管理が非常に難しくなるため。	タブ順序はソースコード順で自然になるようにHTML構造を設計するのがベスト。

タブコンポーネントのように、内部でキーボード操作（矢印キーなど）を要求するウィジェットでは、**tabindex="-1"**が活躍します。

非アクティブなタブ: tabindex="-1"を設定し、Tabキーでの移動順序から除外する。
アクティブなタブ: tabindex="0"を設定し、Tabキーでフォーカスできるようにする。
矢印キー操作: JavaScriptで、ユーザーが矢印キーを押した際に、プログラム的に次のタブにフォーカスを移動（element.focus()）させ、その要素のtabindexを0に、元の要素を-1に更新します。

モーダルウィンドウは、ユーザーの視覚と操作をモーダル内に閉じ込める（トラップする）必要があります。この「フォーカスのトラップ」の成否が、モーダルのアクセシビリティを左右します。

モーダルを開いた直後のフォーカス移動:モーダルが表示されたら、JavaScriptでフォーカスをモーダル内の最初の操作可能な要素（通常は閉じるボタンや最初の入力欄）に移動（element.focus()）させます。
フォーカスループ（トラップ）の実装:モーダル内の最後の要素からTabキーを押した際、フォーカスがモーダルの背景ではなく、モーダル内の最初の要素に戻るようにJavaScriptで制御します。
背景の非活性化:モーダルが開いている間、背景のコンテンツにフォーカスが当たったり、操作されたりしないよう、背景の親要素にaria-hidden=”true”を設定します。
終了時のフォーカス復元:モーダルを閉じた際、ユーザーがモーダルを開くトリガーとなった要素（ボタンなど）にフォーカスを戻します。

role="dialog" と aria-modal="true": モーダルコンテナにこれらを設定し、支援技術に「これはダイアログであり、開いている間は他の要素が操作できない」ことを伝えます。
ESCキー対応: ESCキーを押すとモーダルが閉じ、フォーカスが復元されるように実装します。