どうする
a タグを書くときには必ず href
を設定しましょう。
React などの vDOM ライブラリを使用している場合は a タグの挙動を onClick
で上書きするようなコードを書くことも多いですが、その場合は href="#"
などとしてダミーの値を設定しましょう。
<!-- bad -->
<a onclick="alert('Yo!')">Say Yo!</a>
<!-- good -->
<a onclick="alert('Yo!')" href="#">Say Yo!</a>
なんで
href
が設定されていない a タグはタブキーでフォーカスできません。アクセシビリティ上の理由で、要素の選択とナビゲーションはキーボードだけで行えるのが好ましいです。そのため、基本的にすべての a タグはフォーカスできないといけません。
React を使っていて onClick
が設定されている場合は要素にフォーカスした上でエンターできちんと onClick
の処理が実行されます。
もっと良くする
そもそもその要素は <a>
である必要性があるのでしょうか?
href
がなく onclick
しかないならその要素は <button>
である可能性が高いです。
様々な事情で a タグを使わざるを得ない場合もありますが、できるなら button 要素を使いたいです。