tabindex

tabindexを0より大きくしないことを推奨します

manual確度:medium重大度:minoroperable

tabindexの値が正の数ではなく、0または負の値であることを確認します。

適用範囲:値が有効な整数として解析できるtabindex属性を持つ要素に適用されます。

期待される結果:tabindexの値が0または負の値です。正のtabindexはキーボードのタブ順序を明示的に並べ替えるもので、ページが変わるたびに維持するのが難しく、通常は本来のDOMの順序を修正すべきであることを示しています。

検出結果が報告する内容:

  • value:tabindexの値で、0より大きい整数です。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<div tabindex="0">Focusable</div>

tabindex="0"は、何も並べ替えずに要素を本来のタブ順序に配置します。

can't tell
<div tabindex="3">Reordered</div>

正のtabindexにより、この要素は文書の本来のタブ順序から外れて他のすべての要素より先に来るため、キーボードのユーザーは通常戸惑います。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

TABINDEX_POSITIVE

  1. ページの先頭のすぐ手前をクリックし、フォーカスのアウトラインを観察しながらTabキーを繰り返し押してください。
  2. レポートに示された要素がいつフォーカスを受け取るかを、画面上の位置と比べて控えてください。
  3. フォーカス順序がページの視覚的な順序と読み上げ順序に引き続き沿っているか確認してください。

満たす場合:フォーカスは、レイアウトと意味に合った順序でページ内を移動します。

満たさない場合:正のtabindexによってフォーカスが読み上げ順序から外れて飛ぶため、WCAG 2.4.3を満たさない場合があり(F44)、ベストプラクティスにも反します。

ソースコードを見る