6 ms·

One pet peeve of mine with the button-ish links is that sometimes they only work if I click on the text itself.

dheera 6y ago
This is usually caused by lazy devs who use <div class="mybutton"><a href="javascript:dosomefoo();">foo</a></div> instead of <div class="mybutton" onclick="dosomefoo();" style="cursor:pointer;">foo</div> It's also possible they were trying to support old versions of MSIE in the former.
- bobthepanda 6y ago
  The latter is not WCAG compliant. Really the <a> tag should wrap the div, not the other way around.
  - simonlc 6y ago
    I think wrapping a div with an <a> element is now valid, you probably want to only wrap inline elements like a <span> with an <a> when possible. Imo it's a better practice. It also avoids having large "white space" areas that are clickable, when only the text should be clickable. (Like when you wrap an <h1> with an <a> for example.)
    - bobthepanda 6y ago
      The original comment describes this issue with buttons, where presumably clicking the non-text portion of a button is a feature, not a bug.
    - bobthepanda 5y ago
      To add on, clickable whitespace is more of a feature than a bug generally now, because at least in mobile-web world the worst possible thing you could do is make your touch target extremely small by making it only the icon rather than a standard touch target size centered on said icon.
- runarberg 6y ago
  Please don’t do the latter. It breaks keyboard accessibility. Users that don’t have a mouse have no way of clicking this fake button. This MDN article[1] will help you find the correct attributes and behaviors to make your <div> fully accessible with a button role. 1: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
  - dheera 6y ago
    Well shit ... okay ... if they made it easier to code web pages maybe we'd have a more consistent experience. It seems if you do the intuitive thing you always break it for one user or the other, and it's designed such that you have to do a non-intuitive thing to serve everyone.
    - jaywalk 6y ago
      Intuitiveness is in the eye of the beholder. I'd argue that if you're experienced with accessibility, doing things the "accessible way" becomes more intuitive.
    - lukeschlather 6y ago
      You have to follow the specifications. None of this is remotely intuitive if you haven't read and studied the specs. If your intuition is wrong that's probably because you've been doing "whatever seems to work" rather than reading the specs and following them.
    - bobthepanda 6y ago
      If you want to have the entire div act as a link, the link should cover the div, not the other way around. What’s not intuitive about that?
    - a1369209993 6y ago
      > if you do the intuitive thing you always break it for one user or the other No, if you do the intuitive thing you get: <a href="http://whereever/">foo</a> which works fine for every user.

This is usually caused by lazy devs who use <div class="mybutton"><a href="javascript:dosomefoo();">foo</a></div> instead of <div class="mybutton" onclick="dosomefoo();" style="cursor:pointer;">foo</div> It's also possible they were trying to support old versions of MSIE in the former.

bobthepanda 6y ago
The latter is not WCAG compliant. Really the <a> tag should wrap the div, not the other way around.
- simonlc 6y ago
  I think wrapping a div with an <a> element is now valid, you probably want to only wrap inline elements like a <span> with an <a> when possible. Imo it's a better practice. It also avoids having large "white space" areas that are clickable, when only the text should be clickable. (Like when you wrap an <h1> with an <a> for example.)
  - bobthepanda 6y ago
    The original comment describes this issue with buttons, where presumably clicking the non-text portion of a button is a feature, not a bug.
  - bobthepanda 5y ago
    To add on, clickable whitespace is more of a feature than a bug generally now, because at least in mobile-web world the worst possible thing you could do is make your touch target extremely small by making it only the icon rather than a standard touch target size centered on said icon.
runarberg 6y ago
Please don’t do the latter. It breaks keyboard accessibility. Users that don’t have a mouse have no way of clicking this fake button. This MDN article[1] will help you find the correct attributes and behaviors to make your <div> fully accessible with a button role. 1: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
- dheera 6y ago
  Well shit ... okay ... if they made it easier to code web pages maybe we'd have a more consistent experience. It seems if you do the intuitive thing you always break it for one user or the other, and it's designed such that you have to do a non-intuitive thing to serve everyone.
  - jaywalk 6y ago
    Intuitiveness is in the eye of the beholder. I'd argue that if you're experienced with accessibility, doing things the "accessible way" becomes more intuitive.
  - lukeschlather 6y ago
    You have to follow the specifications. None of this is remotely intuitive if you haven't read and studied the specs. If your intuition is wrong that's probably because you've been doing "whatever seems to work" rather than reading the specs and following them.
  - bobthepanda 6y ago
    If you want to have the entire div act as a link, the link should cover the div, not the other way around. What’s not intuitive about that?
  - a1369209993 6y ago
    > if you do the intuitive thing you always break it for one user or the other No, if you do the intuitive thing you get: <a href="http://whereever/">foo</a> which works fine for every user.