2023年6月20日のブックマーク (1件)

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

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

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