フォーカス順序

Silktide は、キーボードユーザーがページ内を移動する順序を上書きする要素を検出します。デフォルトでは、Tab キーを押すと、ページのコードに登場する順序でリンクやフォームコントロールを移動します。正の値を持つ tabindex 属性はカスタム順序を強制しますが、これはほとんどの場合、誤りです。

<!-- ページ上の他のすべての要素より先にこのフィールドへ移動させる -->
<input tabindex="1" name="search">

重要な理由

キーボードユーザーは、見た目と一致する、予測可能な順序でページ内を Tab キーで移動できることを期待します。正の値を持つ tabindex はその順序を乗っ取ります。まず番号が付いた要素にフォーカスが移動し、その後で他のすべての要素に戻るため、キーボードフォーカスがページ内を飛び回ることがあります。また、脆弱な方法でもあります。後から新しい要素を1つ追加するだけで、すべての番号を振り直す必要が生じ、ページが変更されたときに問題が発生しやすくなります。

修正方法

1. 正の値を持つ tabindex を削除し、HTML の自然な順序で Tab キーによる移動順序を決定できるようにします。
2. 自然な順序が分かりにくい場合は、tabindex で問題を取り繕うのではなく、HTML 内で要素の順序を変更します（視覚的なレイアウトには CSS を使用します）。
3. その他の tabindex の値には問題がなく、チェック対象にはなりません。
   • tabindex="0" は、要素を自然な位置でキーボードフォーカス可能にします。カスタムコントロールに便利です。
   • tabindex="-1" は、要素を Tab キーによるナビゲーションから除外します。ダイアログなど、スクリプトでフォーカスを移動する要素に便利です。

Silktide によるテスト方法

1. ページ上で明示的な tabindex 属性を持つすべての要素を探します。
2. tabindex が 0 より大きい各要素を、確認が必要な問題の可能性があるものとしてフラグします。
3. 0 以下の値にはフラグを付けません。

トラブルシューティング

正の値を持つ tabindex を意図的に使用しています

まれに、ページのコード上の順序を論理的な順序と一致させることが本当にできず、正の値を持つ tabindex が唯一の修正方法になる場合があります。ページ内を Tab キーで移動して、Tab キーによる移動順序が妥当であることを確認できた場合は、この検出結果をチェック済みにできます。

詳細情報

• 成功基準 2.4.3 の理解：フォーカス順序（WCAG 2.2）
• tabindex（MDN）
• 可視フォーカス