このページは Cloud Translation API によって翻訳されました。

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 属性の動作をエミュレートします。これにより、支援技術による要素の選択や読み取りを防ぐことができます。

注意: 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 パターンと、コンポーネントがサポートする必要があるキーについて説明します。