divやspanでボタンっぽい要素を作ると大変なことになるからbuttonを使おう - Qiita

Ateam Brides Inc. Advent Calendar 2021の10日目はデザイナーの綿貫（@xrxoxcxox）がお送りします！ この記事の概要 ボタンっぽい見た目の要素をクリックしたら検索フォームが動くとか自分のプロフィールを更新するとか、そういうインターフェースはたくさんありますよね。 ときどきdivやspan要素にaddEventListener('click', function)をつけて動かしているのを見かけるのですが、結局改善を求められるはずでしかも工数がかかります。 というわけでシンプルにbuttonを使いましょう、と啓蒙する記事です。 伝えたいこと ボタンっぽい役割の要素であればbuttonタグを使いましょう！ この1点のみです！ divやspanでボタンっぽい要素を作るとどうなるの？ タブキーでフォーカスを当てられない enterやspaceでボタンのアク

[sgo2]

buttonはtype="button"付けないとsubmitになるのがイマイチなのでdivやspanを使いたくなるのは分からないでもない

[xlc]

今まで無視されていた視覚障害者対応を急に頑張ろうとしているのはなぜ？単なるポーズなら意味がない。真に対応したいなら視覚障害者にも使ってもらうべきだし、スクリーンリーダーの使い方もマスターすべきだ。

[ryouchi]

“Qiitaにログインして、便利な機能を使ってみませんか？【ログイン】　【新規登録】”のボタンは、<a class=“…” href=“…”></a>となっててではなくハイパーリンクだった

[Kanasansoft]

divやspanで作られててもWAI-ARIAに対応していればほぼ問題ないのに主要なUIコンポーネントライブラリが対応していない。対応しているものがあればそれを使いたいけど情報ほぼなし。なので標準パーツで頑張ってる。

[yojik]

これXでも話題になっていたが、今の時代にこんなことする人いるかな。。カスタマイズしたいならスタイルリセットして好きにやればいいし。それで足りなかったButtonに入れ子でspanでもなんでも仕込めるわけだし