マウス操作ではなく Tab key でフォーカスを当てていき、Enterでリンクをクリックしたりできますが、div や span 要素にはフォーカスが通常あたらないところをあてるようにする方法のmemo
tabindex=""を付与することで、Tab keyで引っかかるようになる
<span tabIndex="0">spanにフォーカス</span>
<div tabIndex="0">divにフォーカス</div>
値には数値が入力可能
- 負の値を指定
タブフォーカスから除外する - 正の値を指定
整数値で振られた順番にフォーカスがあたっていく -
0を指定
0は整数値で指定された後に続いてフォーカスがあたるようになる(後回しになる)-
0どうしは出現順にフォーカスがあたる模様 - 全体的な指定が無い時は
tabindex="0"としておくのが無難みたい
-
clickイベントをつけているときは'keypress'でも同様に動くようしておいた方がよさそう
spanやdivにフォーカスが当たるようになったのは良いけど、javascriptなどでclick functionで動かすようにしているものだと、フォーカスがあたっても動かないことがあるのでkeypressも入れておくと無難
$(element).on('click', function(e) {
// クリックしたら処理
});
↓ jQueryの.on()はイベント名をスペース区切りで複数指定できるのでkeypress を加えておく
$(element).on('click keypress', function(e) {
// クリックしたら処理
});