2

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

2 Answers 2

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!

3
  • interesting, slightly confusing though, as text is not clickable, but everything around is, also the link shows up at the bottom of browser windows when you hover them. You can also be interested in my edited question demo: jsfiddle.net/caub/hb7do4w3/2
    – caub
    May 26, 2021 at 20:26
  • To make the example better I would move the button outside of the .card-body and use display:block on the card-body. That way you get a large tap area on the image and the button has a larger click area as you can still tap the white space around it. Out of your 3 examples (if styling allows) option 3 is actually the best from an accessibility perspective as it is super clear where the click target is. Let me just adjust the fiddle I did to show you what I mean as I think it is the best of both worlds with minimal markup. May 26, 2021 at 20:33
  • jsfiddle.net/ne92fhtk/1 May 26, 2021 at 20:39
1

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

6
  • Couple of questions: 1. large tap targets - going too large (most of screen) is just as problematic as there is no white space for scrolling on mobile. I am interested to see what your company does to find the balance with that as it is always good to get ideas! 2. SEO? How would this affect SEO as the link text would be correct, if anything this would be better for SEO surely as you would have a single link that you can add correct and descriptive text to? I might have missed something there but there is a true <a> element and this just extends the touch area it seems better. May 26, 2021 at 19:39
  • I just re-read the second part on SEO as I was trying to get my head around that, I might have just misread it as I think you have said what I was saying anyway! Still interested to hear your thoughts on how you handle / any rules you have for large tap targets on mobile as that is one that I always have debates on! May 26, 2021 at 20:13
  • Thanks, you might want to see the the fiddle I added in my edited question jsfiddle.net/caub/hb7do4w3/1
    – caub
    May 26, 2021 at 20:21
  • 1
    Hi @GrahamRitchie , generally we don't use most of the screen because most apps that deal with disabilities are for desktop or tablets, so you'll never see anything as big as the whole screen. However, if it's for mobile devices, we would leave enough room, although disabled people tend to use a combination of voice commands and assistive devices (depending on their specific disability). Bottom line, we use the WAI recommendation of large tappable areas combined.with large text There are many nuances to this topic, so I hope this answers your question (feel free to ask if not)
    – Devin
    May 27, 2021 at 16:30
  • @caub I took a look to the fiddle, not sure what the question is, can you clarify?
    – Devin
    May 27, 2021 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.