aタグ以外にもキーボードフォーカスをあてる方法

マウス操作ではなく 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) {
  // クリックしたら処理
});