Accessible card component with the pseudo-content trick

When creating the card component, sometimes it’s advisable (or required by design) to make the whole card clickable. But how to do so without compromising the usability? Below I share a useful pseudo-content trick to make the whole card clickable and maintain its accessibility.

Problem statement

  • the whole card needs to be clickable
  • within the card there is also a “read more” link
  • inside a card, there are other separate links to different URL-s
  • you don’t want to harm the usability, e.g. allow the user to open all links in a new tab with a mouse right-click (context menu on touch devices)
  • support custom styles for hover and focus states
  • one last requirement: user should be able to select and copy the text within a card to the clipboard

How would you approach this task? Just a regular card component wrapped in an a element? Or maybe onclick in JavaScript directly on a div or article element (don’t do that!)?

How to handle such a case and maintain the accessibility in a simple and elegant way?

Live demo (possible solution)

Check clickable area and try tab keyboard navigation in the following example:

Accessible card component

  1. Set position: relative on the container element
  2. Set position: absolute on the link’s :after pseudo-content
  3. Set value of 0 for top, right, bottom, and left properties on link’s :after pseudo-content
  4. Combine it with :focus-within and :hover to style different states
  5. Enhance it even further and make the text selectable with z-index
  6. If you want to add other links inside a card, use styles from card__separate to make it selectable (and/or clickable).
<div class="card">
  <p>
    <a href="#optional" class="card__separate">Optional</span>
  </p>
  <p>
    <span class="card__separate">Lorem ipsum</span>
  </p>
  <a href="#card-link" class="card__link">Link</a>
</div>
.card {
  position: relative;
  border: 3px solid green;

  // Style hover and focus states.
  &:hover,
  &:focus-within {
    border-color: red;
  }

  // Make the content selectable.
  &__separate {
    position: relative;
    z-index: 2;
  }

  // Make the whole card clickable.
  &__link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
  }
}

Credits: I first saw this technique on Inclusive Components website. Check it out for more inclusive components examples.

Further reading

  • Cards on Inclusive Components blog (more solutions to card issues)

Newsletter

Level up your skills with useful web development & UX tips via e-mail.

Comments

If you have any thoughts, please contact me on LinkedIn or see the contact page for more options.