なぜ <div> に onClick がダメなのか？

■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に

[Fluss_kawa]

HTMLはセマンティックにしとけって言うだけだよね。divタグはその範囲内をブロック要素にすると言う文脈以外で使うなってことでしょ。

[Knoa]

「<div> に <button> の役割を与えてはならない」という意味だよね。たとえばLightbox系スクリプトで「閉じるボタンもあるけど、暗い背景をクリックしても閉じれる」みたいな用途だと、背景は <div> で問題ないと思う。

[i5s4y]

Reactメインで書いてる人ってHTMLの仕様には無頓着なイメージあります

[n314]

マウスのカーソルも変えないといけないよ

[yamadar]

“div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ”操作性が低いボタンになってしまう。

[vlxst1224]

tableでサイト全体のレイアウトしたりborderで三角形描いたりとかHTMLとCSSは昔から「あるもので見た目だけ整える」系の裏技が多いから文章構造だけを見るマシーンからしたら混乱するよな。人にやさしく機械にもやさしく

[bopperjp]

HTMLは低レベルすぎる。。どっかのCSSフレームワークに乗っかって、そこから一歩も出ないくらいしかできんわ。

[Helfard]

タブでフォーカスして欲しくないボタンもあるよね。

[manaten]

見た目も機能もボタンなら当然buttonなんだけど、例えばモーダル作っててオーバーレイしてる半透明の部分クリックしたらモーダル閉じさせたい、みたいなときに半透明部分を何にするかは悩む。buttonではなくねという

[mayumayu_nimolove]

大半は「あなたの中ではダメ」なだけ

[xxxxxxxxlarge]

じゃあ、インタラクティブなインターフェースを自作したいときはどうすんねんとは思う

[diveintounlimit]

なんだろう、ちゃんとHTML要素の意味を理解してから開発してもらってもいいですか

[flirt774]

https://yuheiy.github.io/html-for-creators/ "一見取るに足らなそうな小さなインタラクションのひとつひとつが確実に実装されている" HTMLフレームワークの積み上げた努力の結晶なので正しく HTML を書きましょうと

[pmint]

YouTubeではspaceのほかkでも再生・停止できる。Googleの多くのサービスやはてブではj/kがフォーカス移動。結局、標準（ルール）はいくつもあって、マークアップをどうしようがみんなダメ、機能不足になる。

[Finding]

なるほどねー。こういうルールってどこまで従うべきなのかな。。。

[nakag0711]

returnキーとスペースキーは意味違うのでは…

[jintrick]

そもonclickという概念のセンスのなさ。

[kvx]

無意味ではありません。普段から対応できない人は試験前提の時もまともな構造で対応することはできません。

[spark7]

divでやってたやつはおらんのでは... 最低でもaを使っていたと思う。

[mohno]

「div要素にフォーカスを当てるためにはtabindex 属性を付与する必要があります」←方法があること自体知らなかった。

[rck10]

教科書的にはそのとおり。現実的には、tableやdivが乱発されていたのは当時なりの理由があるし、そういう過去資産を無視できないんだから、絵に描いた餅。

[masaru_al]

『ユーザーの操作が可能である要素は、可能な限り対話型コンテンツを使って実装していきましょう』

[Shinwiki]

何度目のネタだ

[Windymelt]

a11yいいね

[xlc]

スクリーンリーダー対応するなら試験もしっかりやるべき。意識高く中途半端に対応するのは無意味。