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）オーサリング プラクティス には、コンポーネントのタイプと、コンポーネントがサポートするキーボード操作が記載されています。

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

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 より大きい最小値からスタートし、次第に大きい値の要素に移動します。

0 より大きい tabindex を使用すると、アンチパターンとみなされます。理由は以下のとおりです。 スクリーン リーダーは、タブ順ではなく DOM 順にページを移動します。タブ順で要素を先頭に表示するには、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 パターンと、コンポーネントがサポートする必要があるキーについて説明します。