Hacker News Reader

Comment by runarberg | Hacker News Reader

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

View on HN

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

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.

> 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;
  }

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?

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.

Reply on news.ycombinator.com