2024/5/1 (投稿日同日) 追記
本記事の関連記事に出てきて気付いたのですが、すでに同じような記事がありました。こちらでは、コードについてより詳しく扱っておられるようです。
具体的には
たとえば、クリック可能な要素を用意したいとします。これは div タグでも実現可能です。
でも、こういうのは div タグじゃなくて、ちゃんと button タグとかで書きましょう、という話です。
div だと何がマズイ？
アクセシビリティ
「アクセシビリティの配慮がなされている」を言い換えると、「環境 (デバイス) の違いや障がいの有無などに関わらず、誰でも利用しやすいように作られている」といったところ。
上の <div> のコードを例に考えてみます。本来「ボタンである」と示すべきところを、コード的には「特に意味を持たないコンテナ」となってしまいます。その結果、ボタンなのにボタンとして正確に認識されなくなり･･･
- キーボードで当該要素を選択・決定できない
- つまりキーボード操作が困難になる
- 自動読み上げをしたとき、ボタンがあると気づかれない
アクセシビリティについて、詳しくは MDN にあるのでこちらをどうぞ。(丸投げ)
Vimium にて
アクセシビリティに関連して、Vimium の例を挙げます。
Vimium はブラウザの拡張機能 (Chrome、Edge および Firefox 対応) で、ブラウザのあらゆる操作をキー操作可能にしてくれるものです。
その機能の一つに、ページ上のリンクなどを開けるというものがあります。f キーを押すと、ページ上にアルファベットが表示され、そのキーを打つことでリンクを開いたりオブジェクトを選択したりできる、というものです。
では、<div> のボタンと <button> のボタンを並べて試してみると？
この通り、<div> 要素はクリック可能として認識してくれませんでした。
適切なタグを使わないことが、障がい者どうこうだけの問題だけでなく、こういった形で影響を及ぼすこともあるわけです。
コードの可読性
div は具体的な意味を持たないタグであるため、言ってしまえば何にでも使えるタグということになります。極端な話、全部 <div> タグ縛りで HTML を書くことも一応可能です。
ところで、HTML コードに <button> とあると、読んでいてどう感じるでしょう？「あ、ここはボタン、つまりクリック可能なんだ」となるはずです。
当然、意味を含まない <div> が並んでいるよりは、意味を含む <input> などが並んでいるコードの方が読みやすいわけです。何も考えず <div> を使うのは避け、むしろなるべく <div> が少なくなるように考えてコードを書いた方が良いでしょう。
ちなみに - input vs button
<input type=button> でもできることは基本同じですが、CSS による装飾の観点で、<button> の方がよりモダンで好まれるようです。
メモ:
<input>要素のbutton型は完全に妥当な HTML ですが、より新しい<button>要素が、ボタンの作成にはより好まれるようになりました。<button>のラベル文字列は開始タグと終了タグの間に挿入され、ラベルに画像を含む HTML を含めることができます。
おわり
<div> を始めとした、具体的な意味を持たないタグを使う前に、他に適切なタグが本当に無いかをよく考えましょう。
例えば、文章の段落なら <p> タグがより適切です。