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

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

Rob Dodson

Alexandra Klepper

<button> や <input> などの標準 HTML 要素にキーボードアクセシビリティ対応可能な限り使用してください。ただし、カスタムのインタラクティブ要素を追加し、想定されるユーザー行動を tabindex を追加しています。

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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 属性の動作をエミュレートします。支援技術によって要素が選択または読み取られるのを防ぎます。

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