← エラー辞典に戻る

HTML

tabindex の順序が期待通りにならない

tabindexの順序が期待通りにならない

こんな症状

tabindexで順序を指定したのにTab移動が期待通りにならない。正の値は避けて0か-1を使おう。

まず試す

正の tabindex をやめ、tabindex="0"（DOM順）にする。フォーカス対象から外すなら -1。

html
<!-- tabindex="0" は全部同じ扱い。フォーカス順は上から書いたHTMLの並び順になる -->
<button tabindex="0">1番目に書いた = 1番目にフォーカス</button>
<button tabindex="0">2番目に書いた = 2番目にフォーカス</button>
<button tabindex="0">3番目に書いた = 3番目にフォーカス</button>

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

  • ✓正の値（1,2,3…）を使っている
    → tabindex="0" にして HTML の並び順で制御する。
  • ✓要素を後から足したら順序が崩れた
    → 正の値は崩れやすい。0 に統一する。
  • ✓フォーカスさせたくない要素
    → tabindex="-1" にする。

なぜ起きる？

tabindexに正の値（1, 2, 3...）を使うと、DOM順序ではなくtabindex値の昇順でフォーカスが移動するよ。複雑になりやすく、後から要素を追加すると順序が崩れる。

✕ エラーが起きるコード
<button tabindex="3">3番目</button>
<button tabindex="1">1番目</button>
<button tabindex="2">2番目</button>
<!-- DOM順と異なる順序でフォーカスが移動 -->
✓ 直したコード
<!-- tabindex=0でDOM順序通りにフォーカス -->
<button tabindex="0">1番目</button>
<button tabindex="0">2番目</button>
<button tabindex="0">3番目</button>

✅ 直ったか確認

Tabキーで HTML の並び順どおりにフォーカスが移ればOK。

🆘 まだ直らないときは

button/a/input は標準でフォーカス可能。装飾要素に無理に tabindex を付けていないか見直そう。

Q&Aで質問する →

この解決法は役立ちましたか？

🔗 関連するエラー

📖 この問題を学べるレッスン

HTMLコース（基礎から）で根本から理解する →

✏️ 手を動かして練習

練習ドリル一覧で実際に書いて確認する →

📝 関連ブログ記事

📖 関連する用語

🚀 HTMLコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。

HTMLコースを始める →

❓ 関連するQ&A