tabindex属性でフォーカスを当てられるようにする

tabindex属性を使って、aタグ以外の要素でもフォーカスを当てられるようにしてみます。

サンプルコード

まずはtabindex属性を使う前のサンプルです。
リストCとリストEだけaタグで囲まないようにします。

HTML

<ul>
	<li><a href="#">リストA</a></li>
	<li><a href="#">リストB</a></li>
	<li><span>リストC</span></li>
	<li><a href="#">リストD</a></li>
	<li><span>リストE</span></li>
</ul>

Tabキーでフォーカスを切り替えてみると、aタグで囲っているリストA、リストB、リストDだけフォーカスが当たります。
tabindex属性追加前のデモページ

リストCとリストEのspanタグにtabindex属性を追加してみます。

HTML

<ul>
	<li><a href="#">リストA</a></li>
	<li><a href="#">リストB</a></li>
	<li><span tabindex="0">リストC</span></li>
	<li><a href="#">リストD</a></li>
	<li><span tabindex="-1">リストE</span></li>
</ul>

リストCのtabindex属性の値を0、リストEのtabindex属性の値を-1としました。
Tabキーでフォーカスを切り替えてみると、リストE以外にはフォーカスが当たりました。
tabindex属性追加のデモページ

リストEのように、tabindexが負の値の場合、Tabキーの切り替えでフォーカスは当たりませんが、クリックすることでフォーカスが当たります。
リストCのように、tabindexが0または正の値の場合、Tabキーの切り替えでもクリックでもフォーカスが当たります。

リストの上から順に、tabindexの値に5～1を入れてみます。

HTML

<ul>
	<li><a href="#" tabindex="5">リストA</a></li>
	<li><a href="#" tabindex="4">リストB</a></li>
	<li><span tabindex="3">リストC</span></li>
	<li><a href="#" tabindex="2">リストD</a></li>
	<li><span tabindex="1">リストE</span></li>
</ul>

Tabキーでフォーカスを切り替えてみると、リストの下から順にフォーカスが移動しました。
tabindex属性追加のデモページ2

tabindexが正の値の場合、値が小さい要素から順にフォーカスが当たるようになります。
tabindexが0の要素は正の値の要素の後になり、同じ値の場合はDOMツリー上の位置通りの順番になります。

【参考サイト】

• tabindex – HTML | MDN