Making elements clickable and still accessible

Written by Hannah Gooding

If you have an element like a “card” on your webpage, and you want the whole element to be clickable, you might be tempted to wrap the link around the element like this: 

<a href="https://www.google.com/" aria-label="link to google">
  <div class="card">
    <h2>Google</h2>
    <p>A popular search engine.</p>
  </div>
</a>

However, this solution is not ideal for screen readers because the aria-label may prevent the screen reader from reading the contents of the element. Rather than wrapping anchor tags around elements, you can use CSS to make the whole element clickable:

<div class="card">
  <h2>
    <a href="https://www.google.com/" aria-label="link to google">Google</a>
  </h2>
  <p>A popular search engine.</p>
</div>

.card a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}