要素のtabindexはゼロより大きくしないでください

値が 0 より大きい tabindex の使用を避ける主な方法は二つあります。一つ目は、 tabindex の値を 0 に変更することです。これは、ユーザーが要素間をタブ移動する際の順序が変わる可能性があることに注意してください。二つ目は、tabindex を全体的に削除し、意図した順序でユーザーが要素間をタブ移動できるよう、ページの構成を調整することです。

三つ目として、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;