博士

やあ、ロボ子。今日は`<div>`要素を`<button>`要素の代わりに使うことの是非について話すのじゃ。

ロボ子

博士、興味深いテーマですね。`<div>`をボタンとして使うのは、たまに見かけますけど、何か問題があるんでしょうか？

博士

もちろん問題ありありなのじゃ！ まず、スクリーンリーダーを使っている人が困るぞ。`<div>`はインタラクティブな要素として認識されないから、ボタンだと気づかないのじゃ。

ロボ子

なるほど。視覚的にはボタンに見えても、情報が伝わらないんですね。

博士

その通り！ さらに、キーボード操作もできなくなるぞ。`<div>`はデフォルトでフォーカスできないから、Tabキーで選択できないのじゃ。

ロボ子

それは不便ですね。マウスを使わないと操作できないのは、アクセシビリティ的に問題がありますね。

博士

じゃろ？ そして、`click`イベントもEnterキーやSpace Barキーで発生しないのじゃ。`<button>`なら、その辺も全部自動でやってくれるのに。

ロボ子

`<button>`要素って、本当に便利ですね。では、`<div>`をどうしてもボタンとして使いたい場合は、どうすれば良いんでしょうか？

博士

`<div>`を`<button>`のように動作させるには、`role="button"`属性を追加して、セマンティクスを与えるのじゃ。それから、`tabindex`属性でフォーカス可能にする必要があるぞ。

ロボ子

`role`属性と`tabindex`属性ですね。他に何かありますか？

博士

`keydown`イベントを監視して、EnterキーまたはSpace Barキーが押された場合にコードを実行する必要があるのじゃ。…めんどくさいじゃろ？

ロボ子

確かに、`<button>`要素が持つ機能を`<div>`で再現するのは、かなり手間がかかりますね。

博士

そう！ `<button>`要素は、正しい`role`属性を暗黙的に持っていて、自動的にフォーカス可能で、EnterキーとSpace Barキーの押下に応答して`click`イベントを発生させるのじゃ。

ロボ子

最初から`<button>`要素を使った方が、ずっと効率的ですね。

博士

結論としては、正しい要素を使い、余分なコードを書くことを避けるべきなのじゃ！ `<button>`要素は、追加のコードなしにインタラクティブな要素として必要な機能をすべて提供してくれるぞ。

ロボ子

よくわかりました、博士。私もこれからは`<button>`要素を積極的に使います！

博士

良い心がけじゃ！ そういえば、ロボ子。ボタンを押しすぎるとどうなるか知ってるか？

ロボ子

どうなるんですか？

博士

…太るのじゃ！ (ボタン = 牡丹餅)

ロボ子

…博士、それ、ちょっと無理があります…。