Wrapping elements in an anchor tag is an a11y no-no.

That’s what Chris says by way of Adrian Roselli. I’m certainly guilty of that right here on this site, so perhaps I need to re-think that approach.

Apparently, targeting the ::after pseudo-element of a link is off limits, too, due to text selection.

.card {
  position: relative;
}

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

I have to admit: that certainly looks tempting. Hetdon Pickering offers a JavaScript alternative that’s even more tempting — and accessible for that matter:

const cards = document.querySelectorAll('.card');  
Array.prototype.forEach.call(cards, card => {  
  let down, up, link = card.querySelector('h2 a');
  card.onmousedown = () => down = +new Date();
  card.onmouseup = () => {
    up = +new Date();
    if ((up - down) < 200) {
      link.click();
    }
  }
});

No matter the approach, it’s a sticky situation. Perhaps Chris is right that linking the actual content is a better way to go. If something is a link, make it look like a link, right? I could see an argument that calls cards as links an anti-pattern.