tabindex
HTML で使用される属性とは何ですか?
ベストアンサー1
tabindex
は、次の 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>