Block Links Are a Pain (and Maybe Just a Bad Idea)

As we noted in our complete guide, you can put an <a href=""> link around whatever chunks of HTML you like. Let’s call that a “block link.” Like you are wanting to link up an entire “Card” of content because it makes a big clickable target.

<a href="/article/"> <!-- display: block; -->
  <div class="card">
    <h2>Card</h2>
    <img src="..." alt="...">
    <p>Content</p>
  </div>
</a>

On that, Adrian Roselli:

Perhaps the worst thing you can do for a block link is to wrap everything in the <a href>.

[…] for a screen reader user the entire string is read when tabbing through controls. In the following example, the first link contains the heading, image (without declaring it as an image), and block of text, taking about 25 seconds to read before announcing it as a link. When tabbing, you do not always know the control type until the accessible name is complete.

(The example is a pretty normal looking card with a header, image, and paragraph.)

So don’t do that.

The alternative is to let the link be “normal” like just the header.

<div class="card">
  <h2><a href="/article/">Article</a></h2>
  <img src="..." alt="...">
  <p>Content</p>
</div>

The extending the “clickable area” of the link to cover the entire area.

.card {
  position: relative;
}
.card h2 a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

That works for the clickable area and solves the penalty to screen reader users.

But there is another problem that hurts both of these solutions, and it’s text selection. You can’t just put your cursor somewhere in the card and select text normally. The click activates the link, waiting for you to mouseup while still on the link to trigger it. You don’t get the ability to select inner parts of the text as you would probably expect. It doesn’t prevent the ability to select the text at all, but it makes it awkward and annoying.

I’m not sure that is easily solveable. Perhaps there is some exotic JavaScript solution that can detect if you’ve started to select text and then not trigger a click, but if you click without dragging then it does go to the link. Something about that is a bit red-flaggy to me though.

Update: Check out Heydon’s “The redundant click event” section of his Cards article.

All in all, I’d say block links are just a bad idea. But I’d love to be proven wrong and see a really good implementation that solves all these issues.