Accessible card component example

Useful pseudo-content trick to make the whole card clickable without compromising the accessibility. https://www.damianwajer.com/blog/accessible-card-component/

by Damian Wajer

HTML

<button type="button">Button 1</button>

<br><br>

<div class="cards">
  <div class="card">
    <p>
      <span class="card__separate">Lorem ipsum</span>
    </p>
    <a href="#card-link" class="card__link">Link</a>
  </div>
  <div class="card">
    <p>
      <a href="#optional-link" class="card__separate">Optional link</a>
    </p>
    <p>
      <span class="card__separate">Lorem ipsum</span>
    </p>
    <a href="#card-link" class="card__link">Link</a>
  </div>
</div>

<br><br>

<button type="button">Button 2</button>

SCSS

.cards {
  display: flex;
  flex-wrap: wrap;
}

.card {
  position: relative;
  margin: .5em;
  padding: .5em;
  border: 3px solid green;
  flex-grow: 1;

  &:hover,
  &:focus-within {
    border-color: red;
  }

  &__separate {
    position: relative;
    z-index: 2;
  }

  &__link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
  }
}

JavaScript

// Click the “Result” tab above to see an example.