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 を使用することは、アンチパターンと見なされます。

コントロールにキーボードでアクセスできるようにする

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

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

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

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

この場合、選択したコンテンツ領域を特定し、-1 の tabindex を指定して、その 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 を避ける

0 より大きい tabindex は、要素を自然なタブ順の先頭に移動します。tabindex が 0 より大きい要素が複数ある場合、タブの順序は 0 より大きい最小値から順に並べられます。

スクリーン リーダーはタブ順ではなく DOM 順でページを移動するため、0 より大きい tabindex を使用することはアンチパターンと見なされます。タブ順で要素を先頭に表示するには、DOM 内の先頭に移動する必要があります。

Lighthouse では、tabindex > 0 の要素を特定できます。ユーザー補助監査を実行し（Lighthouse > オプション > ユーザー補助）、[[tabindex] に 0 より大きい値を指定している要素はありません] 監査の結果を確認します。

「ロービング tabindex」を使用する

複雑なコンポーネントを構築する場合は、フォーカス以外のキーボード サポートを追加する必要がある場合があります。可能な場合は、組み込みの select 要素を使用します。フォーカス可能で、矢印キーを使用して選択可能な追加オプションを表示できます。

独自のコンポーネントに同様の関数を実装するには、「移動 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 パターンと、コンポーネントがサポートする必要があるキーについて説明します。