aタグのTab移動について

Tab移動時にいくつかのaタグにtabが当たらないことがありました。今回は、この問題の原因と解決方法、そしてセマンティックHTMLについてみていきたいと思います。

問題：href属性がないとTab移動できない

まず結論から言うと、href属性がない<a>タグは、デフォルトではTab移動の対象になりません。

<!-- これはTab移動できない -->
<a onclick="showModal()">詳細を表示</a>

この<a>タグはマウスでクリックはできますが、Tabキーを押しても到達できません。

HTMLの仕様上、<a>タグは「アンカー（錨）」要素として設計されており、本来はhref属性で参照先を指定することが前提となっています。hrefがない場合、ブラウザは「ただのテキスト」として扱うため、自動的にはキーボードナビゲーションの対象になりません。

<a tabindex="0" onclick="showModal()">詳細を表示</a>

tabindex="0"を追加することで、Tab移動の対象にできます。

<a href="#" onclick="showModal(); return false;">詳細を表示</a>
<a href="javascript:void(0)" onclick="showModal()">詳細を表示</a>

空のhrefやjavascript:void(0)を指定する方法もあります。

<button type="button" onclick="showModal()">詳細を表示</button>

実際にページ遷移しない場合は、<a>タグよりも<button>タグを使う方がセマンティック的に適切です。<button>は自動的にTab移動の対象になり、キーボード操作（Enter/Spaceキー）にも対応します。

アクセシビリティの観点からも、リンクではなくアクションを実行する要素には<button>の使用が推奨されています。