Opinions on stretched-links and alternatives?

Question

Stretched links allows to have a whole block as a link (without having to wrap all the content in the <a>, which would achieve the same by the way)

One issue I see is that you can't select text from the content, covered by the link ::after pseudo-element

There are advantages of course, like it's easy to browse

Any other drawbacks? or good alternatives for this kind od "card" components (a simple button is often not practical to click/tap, unless it's a very big button)?

Here's a demo: streched-link vs wrapping link vs standard link https://jsfiddle.net/caub/hb7do4w3/2

Answer 1

There are a few minor issues such as selecting text (which is very minor).

A second issue is the fact that it is a large touch target with no white space, which can be an issue on mobiles if it fills most of the screen - someone with Parkinson's disease or Cerebral Palsy for example may accidentally click if there is no "non-interactive" white space. As with anything getting the balance right (small tap targets are equally problematic).

However compared to most patterns this is a lot better (as most wrap the whole card in a hyperlink - which has the same touch target size issue anyway but with the added drawback of having loads of additional and less useful heading and description information as part of the link).

One minor adjustment you can make is to add position: relative to any item that you don't want to be part of the touch area.

Example

In this JSFiddle demonstrating the position: relative technique I have simply added one extra CSS selector to the styles.

.card-body > *:not(.stretched-link){
  position: relative;
  z-index: 2;
}

This makes every item within the card-body div, other than the <button> with the .stretched-link class, have position: relative and tabindex: 2 (so that they show in front of the .stretched-link:after that has tabindex: 1.)

Advantages of being selective about the interactive area

This means that you can select the text and also gives some white space for scrolling on mobile etc. But you still get the benefit of a large tap area around the button or on the image.

Disadvantages

Obviously if it is expect that a card is entirely a tap target it is possible someone might click directly on the text and nothing happens. We could always counter this with JS if we really thought it was an issue using touch-start and touch-end etc. But personally I don't think it is needed. That is one for user testing!

Answer 2

In fact, this is probably the best way to build cards that have only one link. What you mention as a disadvantage is true, but in many cases it is an advantage. Most sites won't want their pages to be easily copied.

In fact, this is probably the best way to build cards that have only one link. What you mention as a disadvantage is true, but in many cases it is an advantage. Most sites won't want their pages to be easily copied.

Another advantage (the main one in my opinion) is that it helps A LOT with accessibility. I've learned this since, for some reason, we ended specializing in user experience for neuropathological disabilities (from dyslexia to Alzheimer's, autism to cerebral palsy, and everything in between), and huge actionable blocks are a real need for us.

One downside I've heard about this approach is that it's really bad for SEO. While that would be true if it were a true a element, it's false because crawlers don't read the CSS, they read the HTML, which is built properly.

In short, I can't think of a "applies to all cases" disadvantage, but I know it has a lot of advantages.

Additional Reading

How to build accessible cards–block links