Hacker News Reader

Comment by lfowles | Hacker News Reader

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

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.

The latter is not WCAG compliant.

Really the <a> tag should wrap the div, not the other way around.

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.)

The original comment describes this issue with buttons, where presumably clicking the non-text portion of a button is a feature, not a bug.

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.

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/A...

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.

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.

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.

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?

> 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.

And if for some reason you still really really want it to look more like a button, there's no need for a wrapper div. For example:

  a {
      display: inline-block;
      padding: 4px;
      background: lightgray;
      border: 2px outset lightgray;
      text-decoration: none;
  }
  a:active {
      border: 2px inset lightgray;
  }

It's luckily a very easy fix, just change the div tag for a button tag. You get all the a11y "for free."

Reply on news.ycombinator.com