そのボタン（クリックイベント）はaタグか、buttonタグか
大前提として、クリックしたい要素は必ずaタグかbuttonタグ。それ以外だと要素がフォーカスを受け取らないため、キーボード操作が不可能になります。
tabキー大好きおばさん「divタグにクリックイベント仕込むのは許さん」
その上で、クリックイベントはaタグか、buttonタグか問題。
結論として、画面遷移やダウンロード等何かにリンクさせるものはaタグ、画面遷移を伴わないアクション（保存とか）はbuttonタグがよいと思います。
よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、 href を # または javascript:void(0) に設定してページの再読み込みを防ぎ、 click を待ち受けするようにするというものがあります。 これらの偽の href 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、 JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。 代わりに ＜button＞ を使用してください。通常、アンカーは適切な URL を使用して移動するためだけに使用するべきです。
「リンクを新しいタブで開く」「リンクを新しいウィンドウで開く」「リンクをブックマーク」が出来ることを考えると、リンクはaタグ、それ以外はbuttonタグ、という考え方をするのが適切ですね。トップ画面や一覧画面は開きっぱなしにして別タブで遷移先の画面開きたいときが結構あります。
別タブ大好きおばさん「buttonタグに遷移イベント仕込むのは許さん」
余談ですが、エラーが発生する可能性があるクリックイベントなら新規ウィンドウ（タブ）を開くような処理を仕込んだ方がよいです。新規ウィンドウ開いて処理させてあげれば、万が一エラーが発生した時などはエラーはそのページに表示され、元のページが汚染されません。 aタグで仕込むならtarget=_blank、buttonタグならjavascriptでwindow.openを指定してあげればOK。
