aタグとbuttonタグの使い分け
hoshita- リンクボタンについて
- デジタル庁
- アクセシビリティについて参考になるサイト一覧
hoshitaリンクボタンについて言及してるzenn記事
リンク（ <a href> ）
ユーザーを別のURL、ページ内の要素、またはファイルに誘導するナビゲーション要素
Ctrl（or⌘）キーを押しながらクリックすれば新規タブで遷移先のURLを開くことができる などボタン（ <button type="button"> ）
クリックをトリガーしてコマンドを実行する
起動すると、フォームを送信したりダイアログを開いたりといった操作を実行する
hoshitaデジタル庁のサイト
結論 デジタル庁のページでbutton要素が使用されてるのはハンバーガーメニューの開閉ボタンのみ。それ以外は見た目がボタンでもaタグが使用されている。（ざっと見た感じ）
ロゴ
aタグで画像(svg)を囲っている。
上段のナビゲーション
ホームはしっかりnav>ul>li>aで囲われており、aタグを使用している。
ハンバーガーメニューを開くボタン
ハンバーガーメニューのボタンはどこかに遷移するのではなく、画面内にメニューを表示させるアクションを持つのでbutton要素になっている。
ハンバーガーメニューを閉じるボタン
開くと同じようにbutton要素である。
ハンバーガーメニュー内のリンク
メニュー内のリンクは他ページに遷移させるのでaタグで囲われいる
スクロールトップさせるボタン
クラス名にbuttonが使用されいてるが、スクロールトップ＝ページ内遷移なのでaタグが使用されている。
このボタンは気を抜くとbuttonタグで実装してしまいそうなので、気をつけたい。
一覧を見るボタン
見た目はボタンだが別ページ(/news)に遷移するのでaタグを使用している。
各種SNSボタン
このボタンも他SNSページに遷移させるのでaタグが使用されている。クラス名はsnsbuttonで指定されている。
hoshitaまとめサイト
アクセシビリティのレベルから絞り込める
Torqueという会社が運用してる
hoshitaGA4・GTMを使用する場合
aタグがクリックされた時のみに実行されるリンククリックトリガーがあるのでaタグの方が良い。
buttonタグで実装した場合、クリックを計測するにはクリックトリガーを使用する必要があるが、
クリックされた最も子要素の情報を取得する という問題点がある
下記の場合だとクリックする箇所によってはspanタグとして発火されてしまう。
<button><span>リンクテキスト</span></a>
クリックトリガーを使用する場合だと、下記のaタグのようにdata属性を持たせてもspanの方で発火するとaタグのdata属性を持たせて発火できず、正確な値が取れなくなってしまう。
<a href="###" data-action-detail="sample"><span>リンクテキスト</span></a>
これを回避するにはGTMの方でカスタムJS変数を登録しないといけないため辛い。
イベント発火の確認の仕方
デベロッパーツールのconsoleでdataLayerと入力してenterを押すと閲覧することができる
