tabindex属性を使って、aタグ以外の要素でもフォーカスを当てられるようにしてみます。
サンプルコード
まずはtabindex属性を使う前のサンプルです。
リストCとリストEだけaタグで囲まないようにします。
HTML
1 2 3 4 5 6 7 | <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
1 2 3 4 5 6 7 | <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
1 2 3 4 5 6 7 | <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ツリー上の位置通りの順番になります。
【参考サイト】
コメントが承認されるまで時間がかかります。