HTML tabindex属性とは何ですか? 質問する

HTML tabindex属性とは何ですか? 質問する

tabindexHTML で使用される属性とは何ですか?

ベストアンサー1

tabindexは、次の 2 つの役割を担うグローバル属性です。

  1. 「フォーカス可能な」要素の順序を設定し、
  2. 要素を「フォーカス可能」にします。

私にとって、2 つ目のことは 1 つ目のことよりもさらに重要です。デフォルトでフォーカス可能な要素はごくわずかです (例: <a> やフォーム コントロール)。開発者はフォーカス不可能な要素 (<div>、<span> など) に JavaScript イベント ハンドラー (例: 'onclick') を追加することがよくあります。マウス イベントだけでなくキーボード イベント (例: 'onkeypress') にもインターフェイスを応答させるには、このような要素をフォーカス可能にします。最後に、順序を設定せずに要素をフォーカス可能にしたい場合は、このtabindex="0"ようなすべての要素に対して以下を使用します。

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

また、Tab キーでフォーカスできないようにするには、 を使用しますtabindex="-1"。たとえば、以下のリンクは、Tab キーを使用して移動しているときにはフォーカスされません。

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

おすすめ記事