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

tabindex が 0 より大きい場合、要素はナチュラルタブの前に移動されます。 できます。tabindex が 0 より大きい要素が複数ある場合、タブは ゼロより大きい最小値から順に増えていきます。

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 パターンと、 サポートすべきコンポーネントを定義します。