タグ

技術とmatch35に関するmohnoのブックマーク (1)

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

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

    なぜ <div> に onClick がダメなのか?
    mohno
    mohno 2023/06/19
    「div要素にフォーカスを当てるためにはtabindex 属性を付与する必要があります」←方法があること自体知らなかった。
  • 1