Semantic Clickable Cards using HTML, CSS, and JavaScript

Card component requirements

Though it’s a simple design component, its important when building cards that they are semantic and in turn, accessible. Here’s a typical card requirements list looks like:

• They should have headings and text and link to another document
• You should be able to click anywhere on the card to go to the other document
• Except, there could also be inline links in text that should go to another document
• And they should have a button to close them

Semantic HTML

<ul class="fullclick">
  <li>
    <h2>Dogs</h2>
    <p>
      Dogs are excellent, and good people. If want to browse dogs
      by breed, check <a href="https://codepo8.github.io/dog-browser/">
      The dog browser</a>. Almost all dogs are good boys and girls. 
    </p>
    <a href="dogs.html" class="main">More dog news</a>
    <button title="click to close" aria-label="click to close">x</button>
  </li>
  <li>
    <h2>Wombats</h2>
    <p>
      Wombats are cute as buttons and digging machines. They look always
      chill and jolly, but aren't a good idea to keep in the house.
    </p>
    <a href="wombat.html" class="main">More wombat info</a>
    <button title="click to close" aria-label="click to close">x</button>
  </li>
</ul>

The example card HTML above produces an unordered list that allows you to easily style it and will also tell screenreaders that the items are linked. It will even announce “1 of 2”, “2 of 2” and so on. Then using a button with an aria-label to close the card makes it keyboard accessible and screenreaders won’t read “button x” which doesn’t give much information.

Making the card clickable

.fullclick li {
  list-style: none;
  margin: 1em 0;
  padding: 20px 10px;
  background: #2b2b2b;
  position: relative;
}
.fullclick a.main {
  color: #85baff;
  text-align: right;
  display: block;
  z-index: 1;
}
.fullclick li a.main::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: ' ';
}

The CSS above positions each list item relative to make sure all positioned elements are contained in it. We then create an overlay over the whole list item that links to the document works with CSS generated content. Setting a z-index of 1 makes sure this covers all elements without positioning.