セマンティック HTML 要素の DOM 位置で指定されるデフォルトのタブオーダーは、
便利ですが、タブの順序を変更しなければならない場合があります。引越し
要素は理想的ですが、現実的ではない可能性があります。このような場合は、
tabindex HTML 属性を使用して要素のタブを明示的に設定できます。
なります。
tabindex はどの要素にも適用できるが、必ずしもそうではない
すべての要素で有用で、整数値の範囲を取ります。あり
tabindex。フォーカス可能なページ要素の明示的な順序を指定できます。
フォーカス不可能な要素をタブオーダーに挿入し、要素を削除する
移動することもできます例:
tabindex="0": 自然なタブオーダーに要素を挿入します。この要素は、
Tab キーを押してフォーカスします。要素にフォーカスするには、
その focus() メソッドで確認できます。
tabindex="-1": 通常のタブオーダーから要素を削除しますが、
focus() メソッドを呼び出すことで、引き続きフォーカスできます。
tabindex="5": 0 より大きい tabindex を指定すると、その要素が前面に表示されます。
おすすめしますtabindex を持つ要素が複数ある場合は、
0 より大きい場合、タブオーダーは 0 より大きい最小値から始まります
順調に進んでいきます
これは特に、ヘッダー、画像、記事などの入力以外の要素に当てはまります。
できます。可能であれば、DOM シーケンスが
並べ替えることができます。tabindex を使用する場合は、カスタム インタラクティブに制限します。
ボタン、タブ、プルダウン、テキスト フィールドなどのコントロールつまり
ユーザーが入力を期待するようなものです。
tabindex はインタラクティブなコンテンツにのみ追加します。重要な画像などのコンテンツが重要な場合でも、スクリーン リーダーのユーザーは、
焦点を当てます
ページレベルでフォーカスを管理する
シームレスなユーザー エクスペリエンスを実現するには、tabindex が必要になる場合があります。たとえば
セクションが異なる 1 つのページを構築すると、
すべてのコンテンツが同時に表示されます。ナビゲーションリンクや
ページを更新せずに、表示されるコンテンツを変更できます。
この場合、選択したコンテンツ エリアを特定し、tabindex を次の値にします。
-1 を呼び出して、その focus メソッドを呼び出します。これにより、特定のルールでコンテンツが
おすすめしますフォーカスの管理と呼ばれるこの手法は、
ユーザーが認識したコンテキストを、サイトのビジュアル コンテンツと同期させる。
コンポーネントのフォーカスの管理
場合によっては、コントロール レベルでもフォーカスを管理する必要があります。 カスタムコンポーネントを作成できます
たとえば、select 要素は基本的なフォーカスを受け取ることができますが、
矢印キーを押すと、追加の選択可能なオプションが表示されます。
カスタムの select 要素を作成する場合は、その要素を複製することが重要です。
キーボードのユーザーがコントロールを操作できます。
どのキーボード動作を実装すべきかを判断するのは難しい場合があります。「 Accessible Rich Internet Applications（ARIA）オーサリング プラクティス には、コンポーネントのタイプと、コンポーネントがサポートするキーボード操作が記載されています。
新しいカスタム要素を ラジオボタンに似ていますが デザインと 確認します。
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
必要なキーボードのサポートを確認するには、 ARIA オーサリング プラクティス ガイドをご覧ください。 セクション 2 では、次を含む設計パターンの一覧を示します。 ラジオの特性テーブル グループ、 新しい要素に最も近い既存のコンポーネントを選択します。
一般的なキーボード動作の 1 つは、 上/下/左/右矢印キーがサポートされています。この動作を新しい tabindex の移動という手法を使用します。
tabindex の移動は、次のすべての子に対して tabindex を -1 に設定することで機能します。
同じです
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
コンポーネントはキーボードのイベントリスナーを使用して、
ユーザーが押すその場合、以前にフォーカスされていた子の
tabindex を -1 に設定し、フォーカスされる子の tabindex を 0 に設定し、
メソッドにフォーカスできます
<radio-group>
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
ユーザーが最後（または、ユーザーの方向によっては最初に移動）にたどり着いたとき 子を移動すると、フォーカスが最初（または最後）にループバックする 表示されます。
次の例を試してみてください。モジュール内で要素を検査し、 TabIndex が 1 つのラジオから次のラジオに移動するのを DevTools で確認します。
モーダルとキーボード トラップ
複雑な状況が発生する可能性があるため、手動でフォーカスを管理することは避けることをおすすめします。 たとえば、フォーカスの管理を試みる予測入力ウィジェットが、 タブの動作を制御しますが、処理が完了するまでユーザーが閉じられないようにします。 これは「キーボード トラップ」と呼ばれ、ユーザーにとって大きなストレスになります。
WCAG の第 2.1.2 項では、キーボードのフォーカスは決してロックしてはならないとされています。 特定のページ要素にとらわれることがあります すべてのページ要素間の移動は、 できます。
このルールの例外はモーダルです。ただし、kubectl の「get」コマンドや
tabindex: モーダルの作成時。inert を使用すると、次のことができます。
ユーザーが誤って要素を操作できないようにする（意図的な
キーボード トラップ）。<dialog> を使用する
要素を使用して、ブロック中にユーザーのモーダルを作成します。
クリックやタブの移動ができます。これによりユーザーは
選択します。