The perfect block link solution | CSS Tricks

An interesting look at a "block links" at "card links": when you want large sections of HTML to be one big clickable link. It's a very common pattern and something I've done a lot, but it's also deeply problematic. It creates a double-standard UX where it is now a pattern that I expect and therefore get annoyed at when it doesn't work: see a blog post, for example, as a card and I expect to be able to click anywhere to read the article. But at the same time, when I'm scrolling down a page on my phone it's incredibly frustrating when a seemingly blank area suddenly redirects me to a new page.

It's also a terrible pattern from an accessibility perspective, because the normal implementation – wrapping the whole section in an <a> tag – screws up navigation by screen readers. It can also impact keyboard users too.

So, overall, a common pattern that is now practically an expected user interaction but which has deep flaws and should likely be stamped out. That paradox is an issue. Vikas has done a good job of outlining the current solutions to that problem alongside their respective pros/cons and comes to an interesting conclusion. He argues for semantically marked up HTML segments (good ✔) with linked headlines and "read more" text (though with better copy than "read more"; also good ✔) which is then progressively enhanced with JavaScript to listen to click events within the parent element (interesting). That allows the whole section to be clickable for JS users, whilst providing semantically relevant links as a fallback, and can be further improved using the window.getSelection() method so that users can still select or highlight text without inadvertently "clicking" the card itself (excellent ✔✔). Clever little trick 👍

const card = document.querySelector(".card")
const mainLink = document.querySelector('.main-link')


card.addEventListener("click", handleClick)


function handleClick(event) {
  const isTextSelected = window.getSelection().toString();
  if (!isTextSelected) {
    mainLink.click();
  }
}

Explore Other Notes

Newer

Pitfalls of card UIs

A great breakdown from Dave as to why the typical card UI pattern has some inherent issues. Some elements – like making cards all the same height and dealing with responsively collapsing card lists […]

Older

An introduction to the indie web

I often end up feeling a little overwhelmed by the whole IndieWeb movement, but I found Chris has done a great job of breaking down a) what they're trying to achieve and b) why it can be useful at a […]
  • An interesting look at a "block links"&nbsp;at "card links": when you want large sections of HTML to be one big clickable link. It's a very common pattern and something I've done a&nbsp;<em>lot</em>, […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.