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> タグがより適切です。