Tabindex でフォーカスを制御する

Rob Dodson 氏

<button> や <input> などの標準の HTML 要素には、キーボード ユーザー補助機能が無料で組み込まれています。ただし、カスタム インタラクティブ コンポーネントを作成する場合は、tabindex 属性を使用してキーボードから確実にアクセスできるようにします。

コントロールがキーボードにアクセスできるかどうかを確認する

Lighthouse のようなツールは、ユーザー補助機能に関する特定の問題を検出するのに優れていますが、中には人間にしかテストできないものもあります。

Tab キーを押してサイト内を移動してみてください。ページ上のすべてのインタラクティブな コントロールにアクセスできるかそうでない場合は、tabindex を使用して、これらのコントロールのフォーカス可能性を改善する必要があります。

タブオーダーに要素を挿入する

tabindex="0" を使用して、自然なタブオーダーに要素を挿入します。次に例を示します。

<div tabindex="0">Focus me with the TAB key</div>

要素をフォーカスするには、Tab キーを押すか、要素の focus() メソッドを呼び出します。

タブオーダーから要素を削除する

tabindex="-1" を使用して要素を削除します。次に例を示します。

<button tabindex="-1">Can't reach me with the TAB key!</button>

これにより、通常のタブオーダーから要素が削除されますが、focus() メソッドを呼び出すことで、その要素をフォーカスできます。

なお、要素に tabindex="-1" を適用しても、その子には影響しません。子が自然にタブオーダーにある場合、または tabindex 値によりある場合は、タブオーダーのままになります。タブオーダーから要素とそのすべての子を削除するには、WICG の inert ポリフィルの使用を検討してください。ポリフィルは、提案された inert 属性の動作をエミュレートします。これにより、支援技術による要素の選択や読み取りができなくなります。

tabindex > 0 を避ける

tabindex が 0 より大きい場合、要素は自然なタブオーダーの前にジャンプします。tabindex が 0 より大きい要素が複数ある場合、タブオーダーは 0 より大きい最小値から始まり、上に移動します。

スクリーン リーダーはタブ順ではなく DOM 順にページを移動するため、0 より大きい tabindex の使用はアンチパターンとみなされます。要素をタブオーダーでより早く並べる必要がある場合は、その要素を DOM 内の前の位置に移動する必要があります。

Lighthouse では、tabindex が 0 より大きい要素を簡単に識別できます。ユーザー補助監査（Lighthouse > [オプション] > [ユーザー補助]）を実行し、「[tabindex] の値が 0 より大きい要素はありません」という監査の結果を確認します。

「tabindex の移動」でアクセス可能なコンポーネントを作成する

複雑なコンポーネントを作成する場合は、フォーカス以外のキーボード サポートの追加が必要になる場合があります。組み込みの select 要素について考えてみましょう。これはフォーカス可能であり、矢印キーを使用して追加機能（選択可能なオプション）を表示できます。

独自のコンポーネントに同様の機能を実装するには、「tabindex の移動」と呼ばれる手法を使用します。tabindex の移動は、現在アクティブな子を除くすべての子に対して tabindex を -1 に設定することで機能します。次に、コンポーネントはキーボード イベント リスナーを使用して、ユーザーがどのキーを押したかを判断します。

この場合、コンポーネントは以前にフォーカスされていた子の tabindex を -1 に設定し、フォーカスされる子の tabindex を 0 に設定して、focus() メソッドを呼び出します。

変更前

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

変更後

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

TODO: DevSite - 思考とチェックの評価

キーボード アクセスのレシピ

カスタム コンポーネントに必要なキーボード サポートのレベルがわからない場合は、ARIA Authoring Practices 1.1 をご覧ください。この便利なガイドでは、一般的な UI パターンと、コンポーネントがサポートする必要があるキーについて説明します。