こんにちわ！フロントエンドエンジニアのワタです。
今日は、初心者向けにボタン実装時の注意点を解説します。結論から言えば、ボタンにはbuttonというhtmlタグ（要素）を使いましょう。
Buttonのデフォルトのスタイリングが思うように変更できないという理由で、divとかspanでボタンを実装していませんか？そのような方は、アクセシビリティを無視した実装にならないように注意してください。
そもそもボタンとは何か？
ボタンとは、「その要素を押すと何かしらの反応があるもの」です。例えば、アイテムをカートに追加する、ドロップダウンを開く、動画を再生するなどです。
重要な点として、見た目（スタイリング）で、その要素がボタンかどうかは決まらないということです。デザイナーから受け取ったデザインを見ると、見た目がボタンのよう要素があったとしても、そのボタンを押すと違うページへ遷移するのなら、それはボタンではなく、リンクです。リンクならば、最適なHTMLタグであるaタグを使用するべきです。
ボタンをdivとかspanで実装するのは避けよう！
それでは、「なぜボタンを実装するときにdivやspanの使用を避けるべきか？」を箇条書きでまとめます。
- HTMLのbuttonには、デフォルトのスタイリングだけではなく、キーボードイベントやアクセシビリティもディフォルトで実装されている。つまりdivやspan要素を使うと、自分でキーボード操作などを実装しないといけない。 例えば、アクセシビリティが考慮された https://www.airbnb.jp/ のページで tab キーを押してみましょう。すると、ボタンやリンクにフォーカスして、tab キーを押すごとに移動していき、Enter(return)キーを押せばその要素をクリックすることができる。
- 開発するエンジニアにとってdivやspanを多用しているマークアップは読み難いので、開発チームの生産性を下げる。
- SEO的にも、意味を持つ HTML（セマンティックHTML ）を使う方が良い。
- divやspanなどの意味を持たないHTMLタグを使えば、スクリーンリーダー（視覚障害者の方などが利用する読み上げ機能。Mac の VoiceOverなど）に、このdivがボタンであると伝えるために、role=”button”を追加する必要が出てくる。butttonであれば、デフォルトでrole属性値がbuttonになっている。
以下はダメな例です。ここでは、divでボタンを実装し、それを押せば何かが開くという実装です。ここは素直にbuttonを使用するべきです。
さらに、アクセシビリティを考慮すればキーボード操作イベントも追加する必要があります。
以上より、うっかりと本来buttonを使うべき箇所に、spanやdivを使ってしまうと、実装しなければならないことが相当増えてしまいますので、注意してください。気づけばまだいいですが、気付かないでアクセシビリティを無視した実装になっているケースをよく見かけます。
まとめ
ボタンの実装には素直にbuttonタグを使いましょう。スタイリングの調整はCSSでやりましょう、ということです。
一方で、アクセシビリティの観点から完全なマークアップを実装するのは相当大変でしょう。Eslintなどのリンターで、ある程度のアクセシビリティをチェックできますが、ボタンにはbuttonを使え！とまでは教えてくれません。そのdivのボタンにtabindexとか、role付け忘れてるよとは、教えてくれますが。
また、サイトのマークアップ全てをコントロールできない状況も多々あるでしょう。ですので、100％完璧にやらなければいけないというわけではなく、エンンジニアであれば、少しでも100％に近づける努力をするべきだと、僕は思います。
ということで、僕は時間のあるときには、レガシーなコードを読みセマンティックなhtmlが使用されているか少しづつ確認、修正し、デプロイしています。
参考サイト
- https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
