要素のタブインデックスは0より大きくすべきではありません

0より大きい値を持つ tabindex の使用を回避するには、主に2つの方法があります。最初の方法は、 tabindex を0に変更することです。これにより、ユーザーが要素間をタブ移動する順序が変わる可能性があることに注意してください。2番目の方法は、 tabindex を完全に削除し、ページの構造を変更して、ユーザーが要素間をタブ移動したときに、当初希望した順序で要素に到達できるようにすることです。

3番目の方法は、tabindexを tabindex="-1" に変更し、Javascriptを追加することです。これにより、Javascriptを使用して「-1」を「0」に変更するまで、タブ オーダーから要素が削除されます。

tabindex="0" または tabindex="-1" + JavaScriptを使用してタブオーダーに項目を追加する

通常の状態では、リンクとフォーム要素のみがタブ フォーカスを受け取ることができます。ほとんどの場合、他の項目 ( <p>、 <th>、 <span> など) をタブ フローに追加しないのが最適ですが、一部の複雑なインタラクティブJavaScriptウィジェットなどの例外的な状況では、通常はタブ フォーカスを受け取らない項目をタブ フローに追加することが理にかなっている場合があります。これを実現するには2つの方法があります。

1. tabindex="0"
2. tabindex="-1" + JavaScript

選択した修正方法に関係なく、結果として得られるタブ順序がユーザーの観点から論理的なパターンに従っていることを確認してください。タブ順序は、視覚的な配置ではなく、DOM内の要素の順序によって決定されることに注意してください。デフォルトのタブ順序 = ソース コードの順序 = スタイルをオフにした順序 であることに留意してください。

注意: 次のCSSスタイルは、要素の視覚的な配置順序を変更する可能性があり、タブ順序がわかりにくくなる可能性があります。

• position: absolute;
• position: relative;
• float: left;
• float: right;