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

Rob Dodson

Alexandra Klepper

<button> や <input> などの標準 HTML 要素にはキーボード アクセシビリティが組み込まれているため、可能な限り使用する必要があります。ただし、カスタムのインタラクティブ要素を作成する必要がある場合は、tabindex を追加することで、想定されるユーザーの行動を作成できます。

tabindex は、インタラクティブなコンテンツにのみ追加してください。重要なコンテンツ（キー画像など）であっても、スクリーン リーダーのユーザーはフォーカスを追加しなくてもコンテンツを理解できます。

tabindex とは何ですか？

組み込み要素によって提供されるデフォルトのタブ順序を変更する必要がある場合は、tabindex HTML 属性を使用して要素のタブ位置を明示的に設定できます。

tabindex は任意の要素に適用できますが、インタラクティブな要素にのみ適用する必要があります。また、整数値の範囲を指定します。tabindex を使用すると、フォーカス可能なページ要素の明示的な順序の指定、通常はフォーカスできない要素をタブオーダーに挿入して、タブオーダーから要素を削除できます。例:

tabindex="0": 要素を通常のタブオーダーに追加します。Tab キーを押すことで要素をフォーカスでき、focus() メソッドを呼び出して要素にフォーカスできます。

tabindex="-1": 自然なタブオーダーから要素を削除しますが、focus() メソッドを呼び出して要素にフォーカスを合わせることは可能です。

tabindex="5": 0 より大きい tabindex を指定すると、その要素が通常のタブオーダーの前に移動します。複数の要素の tabindex が 0 より大きい場合、タブオーダーは 0 より大きい最小値からスタートし、次第に大きい値の要素に移動します。0 より大きい tabindex の使用は、アンチパターンと見なされます。

コントロールがキーボードで操作可能であることを確認する

Lighthouse などのツールは、特定のユーザー補助に関する問題を自動的に検出できますが、一部のテストは人間が手動で行う必要があります。

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

ページレベルでフォーカスを管理する

tabindex は、シームレスなユーザー エクスペリエンスを実現するために役立ちます。たとえば、複数のコンテンツ セクションを含む堅牢な単一ページを作成し、ページ読み込みのさまざまな時点で一部のコンテンツが非表示になっている場合などです。つまり、ナビゲーション リンクをクリックすると、ページを更新せずに表示可能なコンテンツが変更される可能性があります。

この場合、選択したコンテンツ領域を特定し、tabindex に -1 を指定して、その focus メソッドを呼び出します。これにより、コンテンツが通常のタブオーダーで表示されなくなります。この手法はフォーカスの管理と呼ばれ、ユーザーが知覚する状況を、サイトの視覚的なコンテンツに同期させることができます。

コンポーネントのフォーカスを管理する

カスタム要素など、コントロール レベルでフォーカスを管理する必要がある場合もあります。

実装するキーボードの動作を把握するのが難しい場合があります。Accessible Rich Internet Applications（ARIA）Authoring Practices ガイドには、コンポーネントのタイプと、コンポーネントがサポートするキーボード操作の種類が記載されています。

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

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 を避ける

0 より大きい tabindex を指定すると、その要素は通常のタブオーダーの前にジャンプします。複数の要素の tabindex が 0 より大きい場合、タブオーダーは 0 より大きい最小値からスタートし、次第に大きい値の要素に移動します。

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

Lighthouse では、tabindex が 0 より大きい要素を識別できます。ユーザー補助監査を実行し（[Lighthouse] > [Options] > [Accessibility]）、[[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>

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

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