Examples cards
-
Use only one link
The basis: only one link, inside the heading, that is clickable. The rest is not linked and also not clickable.
-
Hide links
Use multiple links, but hide them for keyboard and screen reader users.
Use tabindex="-1" aria-hidden="true" together on a link to hide it.
-
Bad practice: Put an <a> around everything
This will result in very long, link and heading texts and a pain to listen to if you use a screen reader.
-
Option: use a span to cover the card.
Have one link inside the card to the post. Add a span inside the link so it covers the complete card. Props: Janita Top.
-
Option: using pseudo-content
This is the preferred method.
Give the card container element position: relative;
Give the link a ::after pseudo-content.
-
Bad practice: using pseudo-content, plus extra link
Extra link to another page within the clickable card: give it a positive z-index and position relative.
This is in fact a nested interactive control (a link within a link) even if in the HTML the links are separated. This can confuse users, it's harder to understand. This is a cognitive issue.