Clickable Card Interface

When designing websites, there are two important things we need to pay attention to:

  • Accessibility (a11y): Making sure the website is easy to use for everyone, including people with visual or motor difficulties.

  • Search Engine Optimization (SEO): Making the website appear better in Google and other search engines.

In this post, we will learn how to design a Clickable Card correctly without negatively affecting a11y or SEO.

Sometimes, we want the entire card to be clickable.

We have two methods here:

Method One:
Not the best option, because in this approach, all the card’s content is placed inside the  <a>  link. Yes, this makes the whole card clickable, but it is not accessible. This way of writing the code makes it harder for screen readers to identify exactly what is clickable.

Additionally, search engines like Google prefer sites where links are structured well. For example, having the link around only the title (like in Method Two) helps Google understand that the title is important and that it points to another article or piece of content. But in Method One, the link wraps around many elements like the image and description, which can make it unclear to Google what the most important part of the page is, potentially affecting search rankings.

Method Two: (The better method)
Here, the link wraps around only the title, which is better for both a11y and SEO.

But how can the entire card be clickable if the link is only around the title?

We can achieve this using CSS:

  • Inside the link, we add a pseudo-element  ::after .

  • We give this pseudo-element  position: absolute .

  • We set the card itself to   position: relative  so we can position the pseudo-element relative to the card.

  • We make the pseudo-element cover the entire card, acting as a transparent layer over the card while still being part of the link, making the card clickable.

How do we ensure it covers the entire card?
We use  inset: 0  which is shorthand for:

In this way, the entire card becomes clickable smartly without negatively affecting a11y or SEO.

DO:

DONT: