3 ms·

I’ll bite: Why is it bad to put a click handler on a div? Because we’re losing the semantic content of the markup?

by stellar678 7y ago

cortesoft 7y ago
For one, it won't play nice with accessibility helpers... screen readers, keyboard interaction, etc.
- giobox 7y ago
  While I agree semantically use of <button> can be clearer, clickable divs can still play largely fine with most accessibility technologies if ARIA attributes are used. Does it semantically make the most sense? Not necessarily, but it isn't a blocker to most accessibility tools and use and support for ARIA attributes is pretty widespread nowadays, including all of the major browsers and screen readers. > https://developers.google.com/web/fundamentals/accessibility/semantics-aria/ https://developers.google.com/web/fundamentals/accessibility... > https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
  - ricardobeat 7y ago
    Number of times I remember seeing an an app using `<div onclick>` with proper aria attributes: 0.
    - deleted 7y ago
      [deleted]
    - giobox 7y ago
      It's often a legal or contractual requirement when selling software to public bodies in many countries, so I've seen it used a lot. Mileage may vary in other markets. The important point is that fundamentally using a <div> in place of <button> can still be made to work easily with these accessibility tools - many comments here imply it can't be done at all and only a button will work. Does it semantically make sense? Likely no, but it isn't a hard blocker on accessibility.
  - mosdl 7y ago
    Reinventing the wheel is bad
citrablue 7y ago
Because there's already an element for that. Putting a click handler on a div is a hack. In a clean (from scratch) dev situation, when would it make sense to use the div option?
- mattwad 7y ago
  People have been putting event listeners on div long before any framework was around. Tons of libraries and documentation show how to attach a click handler to a div (ex: https://api.jquery.com/click/ https://api.jquery.com/click/). I can think of some cases... maybe the div is contenteditable and I want to trigger some analytics. Maybe I want to listen to all the children of a container rather than apply expensive listeners all over. Do you put button tags around all your tooltips? You might end up making your HTML look right, but now you are jumping through hoops to make it not look like a button. As with all things, it's naive to say "never do something."

I’ll bite: Why is it bad to put a click handler on a div? Because we’re losing the semantic content of the markup?

cortesoft 7y ago

For one, it won't play nice with accessibility helpers... screen readers, keyboard interaction, etc.

giobox 7y ago
While I agree semantically use of <button> can be clearer, clickable divs can still play largely fine with most accessibility technologies if ARIA attributes are used. Does it semantically make the most sense? Not necessarily, but it isn't a blocker to most accessibility tools and use and support for ARIA attributes is pretty widespread nowadays, including all of the major browsers and screen readers. > https://developers.google.com/web/fundamentals/accessibility/semantics-aria/ https://developers.google.com/web/fundamentals/accessibility... > https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
- ricardobeat 7y ago
  Number of times I remember seeing an an app using `<div onclick>` with proper aria attributes: 0.
  - deleted 7y ago
    [deleted]
  - giobox 7y ago
    It's often a legal or contractual requirement when selling software to public bodies in many countries, so I've seen it used a lot. Mileage may vary in other markets. The important point is that fundamentally using a <div> in place of <button> can still be made to work easily with these accessibility tools - many comments here imply it can't be done at all and only a button will work. Does it semantically make sense? Likely no, but it isn't a hard blocker on accessibility.
- mosdl 7y ago
  Reinventing the wheel is bad

citrablue 7y ago

Because there's already an element for that. Putting a click handler on a div is a hack. In a clean (from scratch) dev situation, when would it make sense to use the div option?

mattwad 7y ago
People have been putting event listeners on div long before any framework was around. Tons of libraries and documentation show how to attach a click handler to a div (ex: https://api.jquery.com/click/ https://api.jquery.com/click/). I can think of some cases... maybe the div is contenteditable and I want to trigger some analytics. Maybe I want to listen to all the children of a container rather than apply expensive listeners all over. Do you put button tags around all your tooltips? You might end up making your HTML look right, but now you are jumping through hoops to make it not look like a button. As with all things, it's naive to say "never do something."