概要

• <div> と <button> の使い分けに関する誤解の指摘
• アクセシビリティの観点から <button> が優れている理由の解説
• role属性 や tabindex による“修正”の問題点
• キーボード操作やスクリーンリーダー対応の重要性
• 最終的に button要素 を使うべき理由のまとめ

フレームワーク開発者が陥りがちな「divとbuttonは同じ」論争

• ReactやHTMXユーザーの間で <div> をボタン代わりに使う事例の多発
  • 例: <div onclick="showSignIn()"> Open Modal </div>
• この実装では スクリーンリーダー 利用者に対して操作可能要素であることが伝わらない
• キーボード操作 （Tab移動やEnter/Space押下）に非対応
• 著名なReact界隈の人物が「divがbuttonよりアクセシブル」と主張した事例も存在

「修正案」が抱える根本的な問題

• HTMLの button要素 は暗黙的に[role="button"]を持ち、支援技術に意図が伝わる
• role属性 をdivに付与しても、フォーカス可能やキーボード操作には非対応
  • 例: <div role="button" onclick="showSignIn()"> Open Modal </div>
• tabindex="0" でフォーカス可能にできるが、フォーカス順序の混乱や予期せぬ動作を招くリスク
  • 例: <div onclick="showSignIn()" tabindex="0"> Open Modal </div>
• キーボード操作対応には keydownイベント の追加実装が必要
  • Enter/Space押下時だけ処理するよう分岐
  • フォーカス対象の特定やイベントの伝播制御が煩雑

「全部自作」するくらいなら最初からbuttonを使うべき理由

• 上記の「修正」を積み重ねると、結局buttonの標準機能を再実装しているだけ
• button要素なら…
  • role="button" が自動で付与される
  • Tabキー で自然にフォーカス移動
  • Enter/Space で自動的にクリックイベント発火
• 余計なコードを書く必要がなく、保守性・アクセシビリティ・ユーザビリティ全てで優位

結論：正しい要素を選ぶことが最良の“省力化”

• Reactや他のフレームワークが好きな開発者ほど、 「書かなくて済むコード」 を重視する傾向
• button要素 を正しく使うことで、無駄な実装やバグの温床を回避
• 本質的なアクセシビリティ と 開発効率 の両立が実現