tabindexを使おうとした時にハマってしまったので、
備忘録として残しておく。
参考資料にも書いてあるように、aタグにはtabindexを使用しなくてもtabキーを押したらフォーカスされるはずなのだが、sampleのようなaタグにはフォーカスされずsample2のようなaタグにはフォーカスされていた。
tabキーを押した時にフォーカスされなかったaタグ
sample.html
<a id="open-soccer" title="open-soccer" onclick="clickButton2()">詳細表示ボタン</a>
tabキーを押した時にフォーカスされたaタグ
sample2.html
<a id="home-link" href="#home">HOME</a>
sampleのコードではaタグのリンクを無効にして詳細表示ボタンとして使うためにhref属性を外していたのだが、どうやらそれが原因だったみたい。
Tabでフォーカス移動できるようにしたい場合は、href属性を指定するか、tabindexを指定してあげないといけない。ただし、tabindexを指定するときはフォーカスされる順番に気をつける。
参考文献