Article teasers don't need the same link three times

Try tabbing through a typical article listing. Twenty teasers, each with a linked image, a linked heading, and a linked excerpt. That’s sixty tab stops, all pointing to the same twenty places. Somewhere around teaser four, a keyboard user starts doing the math on whether this article is worth it.

The instinct behind it is reasonable. Everything in the teaser should feel clickable, so everything gets a link. But three links to the same URL don’t make a teaser three times more clickable. They make it one teaser with two redundant announcements and a lot of extra stops on the way to the next one. And the common fix, wrapping the whole card in one big anchor, comes with its own baggage: the entire teaser text becomes the link name, and you’re stuck the moment you need a second interactive element inside, like a bookmark button or a tag link.

There’s a quieter option. One link, usually on the heading, and a pseudo-element to stretch its click area across the card:

.teaser {
  position: relative;
}

.teaser__link::after {
  position: absolute;
  inset: 0;
  content: "";
}

The whole teaser is clickable. The link has a sensible name. Keyboard users get one tab stop per article, which is the number of articles they’re actually trying to get past. If you do need another button or link inside the card, give it position: relative and a z-index, and it sits above the overlay.

Example heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, labore qui rem minima sed maiores. Read more

Stuck with a CMS or component library that insists on delivering three links whether you like it or not? There’s a workaround for that too.