aタグ以外にもフォーカスは当てられる

HTML 小技

以前、Add Tab Index for Googleを作っていたときに、こんなバグがありました。

なんでこんなところにフォーカスが・・・。



不思議に思って調べてみたところ、フォーカスを当てられるのはaタグに限らないそうです。
もっと言うと、どのタグにもフォーカスは当てられるということを知りました。
タグにtabIndex属性を指定すればいいそうです。

参考サイト：キー操作可能なカスタム DHTML ウィジェット | MDN
サンプル：ARIA Checkbox (http://www.mozilla.org/access/dhtml/checkbox)

<span tabIndex="0" onclick="alert('フォーカスできる!');">このSPANをクリック</span>
<div tabIndex="0" onclick="alert('DIVもOK!');">このDIVをクリック！</div>

tabIndex="0"で普通のaタグと同じフォーカスの当たり方になります。
また、tabIndex="-1"でタブではフォーカスされないけど、focus()を呼べばフォーカスされるようになります。
しかも、これはFirefoxの方言ではないのでIEでもSafariでもＯＫ。


<a href="javascript:void(0);" onclick="〜"> と書くのと同じですが、SPANを使ったこのやり方の方が断然いい気がします。
ただ、このやり方、あんまり見ないので何か弱点でもあるのでしょうか・・・。