サイト制作

tabindexの0とマイナス1はどう違う？キーボードで移動しやすい画面の基本

慈愛妃きづな

2026-11-07

この記事には広告・アフィリエイトリンクが含まれます。

Tabキーで移動する順番を考えるときのtabindex。正の番号を増やす前に、HTMLの順序と本来の操作要素を見直します。

0は通常の移動順、マイナス1は別の用途

tabindexは、要素へフォーカスできるか、順番に移動する操作でどう扱うかに関わる属性です。0を指定した要素は、通常は文書の順序に沿ったTabキーの移動対象になります。

マイナス1は、Tabキーで順番に移動する対象から外しつつ、スクリプトなどでフォーカスを移す用途に使えます。たとえば画面の状態が変わったとき、必要な場所へ移動させたい場合です。完全に操作不能にする指定だと考えないようにしましょう。

正のtabindexで移動順を細かく指定する方法もありますが、内容の追加や変更で順序を維持しにくくなります。まずはHTMLの並びが、読む順番や操作する順番に合っているかを整える方が扱いやすいです。

リンクやボタンなど、本来フォーカスできる要素に、理由なくtabindexを足す必要はありません。見た目の位置だけを変えて、キーボードの順序が飛び回る状態になっていないかも確認しましょう。

普通のdivへtabindexを付けても、標準のbuttonと同じ操作や意味がすべて備わるわけではありません。ボタンとして使うなら、まずbutton要素を選ぶのが基本です。

公開前はマウスを使わず、TabキーとShiftを組み合わせた逆方向の移動も試してみましょう。今どこにいるか見えること、順序が自然なこと、必要な操作へ到達できることを確かめたいですね。