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

Rob Dodson

Alexandra Klepper

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

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

tabindex とは

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

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

tabindex="0": 自然なタブオーダーに要素を挿入します。Tab キーを押すと要素にフォーカスが移動し、要素の focus() メソッドを呼び出すと要素にフォーカスが移動します。

tabindex="-1": 自然なタブ順序から要素を削除しますが、要素の focus() メソッドを呼び出すことで、要素にフォーカスを当てることができます。

tabindex="5": tabindex が 0 より大きい場合、その要素は自然なタブ順の先頭に移動します。tabindex が 0 より大きい要素が複数ある場合、タブオーダーは 0 より大きい最小値から始まり、順に大きくなります。tabindex に 0 より大きい値を使用することは、アンチパターンと見なされます。

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

Lighthouse などのツールは、特定のアクセシビリティの問題を自動的に検出するのに優れていますが、一部のテストは人間が手動で行う必要があります。

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

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

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

この場合、選択されたコンテンツ領域を特定し、tabindex を -1 に設定して、その focus メソッドを呼び出します。これにより、コンテンツが自然なタブ順序で表示されなくなります。この手法は、フォーカスの管理と呼ばれ、ユーザーが認識するコンテキストをサイトのビジュアル コンテンツと同期させます。

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

場合によっては、カスタム要素などを使用して、コントロール レベルでフォーカスを管理する必要もあります。

実装すべきキーボードの動作を把握するのは難しい場合があります。Accessible Rich Internet Applications（ARIA）の作成方法のガイドには、コンポーネントの種類と、それらがサポートするキーボード アクションの種類が記載されています。

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

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 より大きい最小値から始まり、順に大きくなります。

tabindex を 0 より大きい値で使用することは、アンチパターンと見なされます。これは、スクリーン リーダーがタブ順ではなく DOM 順にページを移動するためです。タブオーダーで要素を早く表示する必要がある場合は、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>

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

カスタム コンポーネントに必要なキーボード サポートのレベルが不明な場合は、ARIA オーサリング プラクティス 1.1 を参照してください。このガイドでは、一般的な UI パターンを一覧表示し、コンポーネントがサポートすべきキーを特定します。